首页 > 代码库 > 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布局