[js樣式效果]具有停頓效果上下滾動方式
阿新 • • 發佈：2018-12-01
一般用於公告的滾動效果
<!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,speed){ this.element=$(element); this.element.innerHTML+=this.element.innerHTML; this.height=height; this.delay=delay*1000; this.speed=speed; 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),this.speed); }else{ this.counter=0; this.timer=setTimeout(this.scroll.bind(this),this.delay); } }, stop:function(){ clearTimeout(this.timer); } } new Scroll('a', 22,2.5,15) </script> </body> </html>