HTML structure:
<Divstyle= "width:200px;height:100px;overflow:hidden;border:1px solid #ddd; margin:20px auto;"> <ulID= "List"> <Li><ahref="#">2222222222222222222222222</a></Li> <Li><ahref="#">3333333333333333333333333</a></Li> <Li><ahref="#">22222222222222222222222222</a></Li> <Li><ahref="#">22222222222223222222222222</a></Li> <Li><ahref="#">22222222222222422222222222</a></Li> <Li><ahref="#">2222222222222252222222222</a></Li> <Li><ahref="#">22222222225555552222222222</a></Li> <Li><ahref="#">22222222222253333333222222</a></Li> <Li><ahref="#">22222222277777777222222</a></Li> </ul> </Div>
Js:
/** List timed scrolling effect (JavaScript) * @listId: Scrolling list ID * @listTagName: Scrolling element * @scr Ollnum: Set Number of scrolling elements * @speed: Scrolling speed*/ functionfnscrolllist () { This. init.apply ( This, arguments); } Fnscrolllist.prototype={init:function(listid,tagname,scrollnum,speed) {var_this = This; This. olist = This. $$ (LISTID); This. Scrolltimer =NULL; This. Speed = Speed | | 1000; This. Scrollnum = Scrollnum | | 1; This. TagName =TagName; This. Distance = This. Olist.getelementsbytagname (TagName) [0].offsetheight * This. Scrollnum;//list Move Distance This. OList.style.marginTop = 0 + "px"; This. Olist.onmouseover =function() {_this.pause (); } This. Olist.onmouseout =function() {_this.scrolltimer= SetTimeout (function() {_this.play (); },_this.speed); } This. Play (); }, Play:function(){ var_this = This; varOptions = {' margintop ': '-' +_this.distance}; _this.anim (_this.olist,options,function(){//callback functions, moving list elements for(vari = 0,j = 0;i<_this.scrollnum;i++){ varnode =_this.olist.getelementsbytagname (_this. TagName) [j]; if(_this. TagName = = "TR") {_this.olist.getelementsbytagname (' tbody ') [0].appendchild (node); }Else{_this.olist.appendchild (node); }} _this.olist.style.margintop= "0px"; }); _this.scrolltimer= SetTimeout (function() {_this.play (_this.distance); },_this.speed); }, pause:function() {cleartimeout ( This. Scrolltimer); }, //Animation FunctionsAnimfunction(oelement,oattr,fncallback) {var_this = This; Clearinterval (Oelement.timer); Oelement.timer= SetInterval (function(){ varBstop =true; for(varPropertyinchoattr) { varIcur = parsefloat (_this.css (Oelement, property));//gets the current Position property value varIspeed = (Oattr[property]-icur)/5;//Move ProgressIspeed = ispeed > 0?Math.ceil (ispeed): Math.floor (Ispeed); if(Icur! = Oattr[property]) {//if the current value is not equal to the target value, the value incrementsBstop =false; _this.css (Oelement, property, Icur+ispeed); } } if(bstop) {clearinterval (Oelement.timer); Fncallback&&fncallback.apply (_this, arguments); } },50); }, //working with style functionsCss:function(Oelement, attr, value) {if(Arguments.length = = 2) { returnOelement.currentstyle? OELEMENT.CURRENTSTYLE[ATTR]: getComputedStyle (oelement,NULL) [attr]; } Else if(Arguments.length = = 3) { Switch(attr) { Case"Top": Case"Left": Case"MarginTop": oelement.style[attr]= value + "px"; Break; default: oelement.style[attr]=value; Break; } } }, $$:function(o) {if(o) {returndocument.getElementById (o); } } };
View Code
Function call:
var new fnscrolllist (' list ', ' Li ', 2,2000);
Effect:
Industrial Park 1 |
123 |
Mild pollution |
Industrial Park 2 |
123 |
Mild pollution |
Industrial Park 3 |
123 |
Mild pollution |
Industrial Park 4 |
123 |
Mild pollution |
Industrial Park 5 |
123 |
Mild pollution |
Industrial Park 6 |
123 |
Mild pollution |
Industrial Park 7 |
123 |
Mild pollution |
Industrial Park 8 |
123 |
Mild pollution |
- 2222222222222222222222222
- 3333333333333333333333333
- 22222222222222222222222222
- 22222222222223222222222222
- 22222222222222422222222222
- 2222222222222252222222222
- 22222222225555552222222222
- 22222222222253333333222222
- 22222222277777777222222
Demo
Demo.zip
JavaScript List timed scrolling effect