首页 > 代码库 > JS:新闻公告滚动,li布局
JS:新闻公告滚动,li布局
预览效果:
样式:
<style type="text/css">#hotNews {border:1px solid #ccc;width:320px;background:url(laba.png) no-repeat 5px 5px;}#hotNews ul{font-size:12px;height:24px;overflow:hidden;}#hotNews ul{list-style-type:none;margin:0;padding:0;margin-left:32px;}#hotNews ul li{height:24px;line-height:24px;width:320px;float:left;display:inline;}</style>
布局代码:
<div id="hotNews"> <ul id="hotNewsUl"> <li><a href="#">任志强:房价不高,胸罩比房子还暴利</a></li> <li><a href="#">木子美:约炮不是卖淫也不是性骚扰</a></li> <li><a href="#">里宁:现在的男人几乎没有不出轨的</a></li> <li><a href="#">李剑芒:毛时代农民进城隔夜不归是罪</a></li> <li><a href="#">冯学荣:北洋时期媒体可随意讽刺政府</a></li> </ul></div>
Javascript:
<script type="text/javascript">function scollNew(element){ if(arguments.length>1){ for(var i=0,length=arguments.length,elements=[];i<length;i++){ elements.push(scollNew(arguments[i])); } return elements; } if(typeof element=="string"){ return document.getElementById(element); }else{ return element; }}var Class={ create:function(){ return function(){ this.initialize.apply(this,arguments); } }}Function.prototype.bind=function(object){ var method=this; return function(){ method.apply(object,arguments); }}var Scroll=Class.create();Scroll.prototype={ initialize:function(element,height){ this.element=scollNew(element); this.element.innerHTML+=this.element.innerHTML; this.height=height; this.maxHeight=this.element.scrollHeight/2; this.counter=0; this.scroll(); this.timer=""; this.element.onmouseover=this.stop.bind(this); this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this); }, scroll:function(){ if(this.element.scrollTop<this.maxHeight){ this.element.scrollTop++; this.counter++; }else{ this.element.scrollTop=0; this.counter=0; } if(this.counter<this.height){ this.timer=setTimeout(this.scroll.bind(this),20); }else{ this.counter=0; this.timer=setTimeout(this.scroll.bind(this),3000); } }, stop:function(){ clearTimeout(this.timer); }}var myscroll=new Scroll("hotNewsUl",24);</script>
JS:新闻公告滚动,li布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。