YUI下改造的滚动效果

       公司最新项目使用YUI,正好有一个图片滚动功能,之前从网上找了一段代码,用可以倒是可以用,但是会不停的创建图片链接或者div,发送图片请求,对服务造成压力,所以改造成如下:

 

AP.widget.ScrollBox=new AP.Class({
            scrollBox:null,//滚动区域div
            scrollBoxHeight:null,//一次滚动高度
            scrollCol:0,
            scrolln:0,
            setTimeOut:20,//数值越大移动越快
            addTimeOut:3000,//移动完一次后停留间隔
            space:1,//一次移动距离,
            size:3,//滚切区数目,默认为3条在滚动
            initialize:function(_arg){
                if(_arg.scrollBox){
                    this.scrollBox=_arg.scrollBox;
                    this.scrollBoxHeight = this.scrollBox.clientHeight;
                    this.scrollBox.innerHTML += this.scrollBox.innerHTML;
                     this.addScroll();
                }
                if(_arg.setTimeOut){this.setTimeOut=_arg.setTimeOut;}
                if(_arg.addTimeOut){this.addTimeOut=_arg.addTimeOut;}
                if(_arg.space){this.setTimeOut=_arg.space;}
                if(_arg.size){this.size=_arg.size;}
            },
            setScroll:function(){
                 this.scrollBox.scrollTop = this.scrollCol + this.scrolln;
                 if(this.scrolln==this.scrollBoxHeight) return this.addScroll()
                else    this.scrolln +=this.space;
                var o = this;
                function m(){o.setScroll();}
                setTimeout(m,this.setTimeOut);
            },
            addScroll:function () {
                if(this.scrollBox.scrollTop>=this.scrollBoxHeight*this.size)
                 this.scrollBox.scrollTop=0;
                this.scrollCol = this.scrollBox.scrollTop;
                this.scrolln = 0;
                var o = this;
                function m(){o.setScroll();}
                setTimeout(m,this.addTimeOut);
             }
        });

 

欢迎讨论@@ 希望下次能扩充到左右移动

你可能感兴趣的:(yui)