JavaScript List timed scrolling effect

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:

Site name	AQI	category

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