原生javascript-无间缝滚动，封装

目前支持的是竖向与横向滚动

http://lgyweb.com/marScroll/

现在分析下无间缝实现的基本思路（竖向例子）：

HTML结构：

1 <div id="marScroll">

2         <ul>

3             <li>01</li>

4             <li>02</li>

5             <li>03</li>

6             <li>04</li>

7             <li>05</li>

8         </ul>

9 </div>

CSS：

1 <style type="text/css">

2     ul,li{padding: 0;margin: 0;}

3     #marScroll{height: 60px;overflow: hidden;}

4     #marScroll li{height: 20px;line-height: 20px;font-size: 14px;}

5 </style>

（1）首先需要判断里面的内容高度ul结构是否高于外层div#marScrolll，则才进行无间缝滚动：

       // 写在匿名函数里面，防止全局变量污染

    (function(){

        var target = document.getElementById('marScroll'),

            oUl = target.getElementsByTagName('ul')[0];

        // 内容少，则直接退出此函数

        if(oUl.offsetHeight<target.offsetHeight) return;

    })();

（2）无间缝就是内容的无限滚动展示，那么先需要复制里面的内容，然后通过外层的scrollTop++属性，用setInterval 函数进行循环执行

        target.innerHTML += target.innerHTML;

        /* 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了

        ---------------------------------------------------------------------------------------------*/

        // 把功能函数抽离出来，方便调用

        var fn = function(){

            if(target.scrollTop == oUl_h){

                target.scrollTop = 0;

            }else{

                target.scrollTop++;

            }

        }

        // setInterval 循环

        var timer = setInterval(function(){

            fn();

        },30);

（3）鼠标经过此内容块时，就停止滚动

        // hover

        target.onmouseover = function(){

            clearTimeout(timer);

        }

        target.onmouseout = function(){

            timer = setInterval(function(){

                fn();

            },30);

        }

例子JS总代码：

     // 写在匿名函数里面，防止全局变量污染

    (function(){

        var target = document.getElementById('marScroll'),

            oUl = target.getElementsByTagName('ul')[0],

            oUl_h = oUl.offsetHeight;

        // 内容少，则直接退出此函数

        if(oUl_h<target.offsetHeight) return;

        target.innerHTML += target.innerHTML;

        /* 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了

        ---------------------------------------------------------------------------------------------*/

        // 把功能函数抽离出来，方便调用

        var fn = function(){

            if(target.scrollTop == oUl_h){

                target.scrollTop = 0;

            }else{

                target.scrollTop++;

            }

        }

        // setInterval 循环

        var timer = setInterval(function(){

            fn();

        },30);

        // hover

        target.onmouseover = function(){

            clearTimeout(timer);

        }

        target.onmouseout = function(){

            timer = setInterval(function(){

                fn();

            },30);

        }

    })();

已经完成了个简单的竖向无间缝，为了满足更多的需求，建议封装成可以，竖向，横向，多次调用的函数。

以下是个人的封装，线上例子：

http://lgyweb.com/marScroll/

function GyMarquee(opt){

    this.opt = opt;

    if(!document.getElementById(this.opt.targetID)) return;

    this.target = document.getElementById(this.opt.targetID);

    this.dir = this.opt.dir == 'crosswise'?'crosswise':'vertical';

    this.effect = this.opt.effect == 'scroll'?'scroll':'marque';

    this.scrollHeight = this.opt.scrollHeight;

    this.init();

}

GyMarquee.prototype = {

    marquee:function(){

        var _that = this,

            direction = 'scrollTop',

            judge = this.target.scrollHeight,

            timer = null;

        if(this.dir == 'crosswise'){

            direction = 'scrollLeft';

            judge = this.itemLen*this.opt.itemWidth;

            this.targetChild.style.width = this.itemLen*this.opt.itemWidth*2 + 'px';

        }

        var doFn = function(){

            if(_that.target[direction] == judge){

                _that.target[direction] = 0;

            }

            _that.target[direction]++;

        }

        timer = setInterval(function(){

            doFn();

        },38);

        this.target.onmouseover = function(){

            if(timer) clearTimeout(timer);

        }

        this.target.onmouseout = function(){

            timer = setInterval(function(){

                doFn();

            },38);

        }

    },

    scrollDo:function(){

        var can = true,

            _that = this;

        this.target.onmouseover=function(){can=false};

        this.target.onmouseout=function(){can=true};

        new function (){

            var stop=_that.target.scrollTop%_that.scrollHeight==0&&!can;

            if(!stop)_that.target.scrollTop==parseInt(_that.target.scrollHeight/2)?_that.target.scrollTop=0:_that.target.scrollTop++;

            setTimeout(arguments.callee,_that.target.scrollTop%_that.scrollHeight?20:2500);

        };

    },

    getByClassName:function(className,parent){

        var elem = [],

            node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),

            p = new RegExp("(^|\\s)"+className+"(\\s|$)");

        for(var n=0,i=node.length;n<i;n++){

            if(p.test(node[n].className)){

                elem.push(node[n]);

            }

        }

        return elem;

    },

    init:function(){

        var val = 0;

        if(this.dir =='crosswise'&&this.effect=='marque'&&this.opt.itemName!=''){

            this.itemLen = this.target.getElementsByTagName(this.opt.itemName).length;

            val = this.itemLen*this.opt.itemWidth;

        }else{

            val = this.target.scrollHeight;

        }

        var holderHTML = this.target.innerHTML;

        this.target.innerHTML = '<div class="J_scrollInner">'+holderHTML+'</div>';

        this.targetChild = this.getByClassName('J_scrollInner',this.target)[0];

        var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth';

        if(val>this.target[attr]){

            if(this.effect == 'scroll'){

                this.scrollDo();

            }else{

                this.marquee();

            }

            this.targetChild.innerHTML += this.targetChild.innerHTML;

        }

    }

}

标签: javascript

巴特西

javascript-无间缝滚动，封装

原生javascript-无间缝滚动，封装

最新文章

热门文章