求一个控制多条公告向上滚动的js代码!
求一个控制多条公告向上滚动的js代码!我用的是div显示一行公告的,求高人指点啊!
[解决办法]
简单来说吧。假设有n个图片纵向排列,假设其总高度是x,那么你需要将它们再复制一份(类似于将div的innerHtml再复制一份)放在下面(这样总高度就是x+x了)。
然后让这个新的组合,在一个js定时器作用下向上滚动(减小其top值),超出外边框的部分自动剪切,而当最后一张图片已经全都显示之后,显然下边也还能看到顶部第一张图片接在下面,所以产生了连续滚动的效果。
实际上是靠上下复制一次要显示的内容才能做到貌似连续滚动效果的!而js控制其连续性的代码只需要写一行,就是捕获当滚动的top值等于(或者小于)-x的时候,立刻让top等于0。
[解决办法]
- HTML code
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> ul { margin:100px; height:22px; border:1px solid red; overflow:hidden; } li { height:22px; line-height:22px; font-size:12px; } </style> </head> <body> <ul id="a"> <li>1-1</li> <li>1-2</li> <li>1-3</li> <li>1-4</li> </ul> <script> //document.getElementById()的最简化应用 function $(element){ if(arguments.length>1){ for(var i=0,length=arguments.length,elements=[];i<length;i++){ elements.push($(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,delay){ this.element=$(element); this.element.innerHTML+=this.element.innerHTML; this.height=height; this.delay=delay*1000; 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),5); }else{ this.counter=0; this.timer=setTimeout(this.scroll.bind(this),this.delay); } }, stop:function(){ clearTimeout(this.timer); } } new Scroll('a', 22, 0.2) </script> </body></html>