原生javascript-無間縫滾動，封裝

目前支持的是豎向與橫向滾動

http://lgy.1zwq.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://lgy.1zwq.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;
        }
    }
}