jQuery 无缝滚动

这个效果, 我在用js直接实现的时候, 有兼容问题, 我于是想到jQuery实现.

其实在此之前, 我也没在意过, 既然遇到了, 就把它记录一下.

这是我对无缝滚动的理解, 下面先上图

我来解释一下这个滚动中的图形:

　　蓝色和绿色部分表示我们的内容, 绿色的是内容1, 蓝色的是内容2

　　最外边可以看到有红色的边框(不是很明显), 这个红色的边框设置了overflow:hidden;如果不设置的话就是下面的样子:

　　

　　可以看到,如果不要overflow的话, 首先会出现下方的滚动条, 然后溢出部分可见.

　　但是我们滚动的时候, 并不是在滚动蓝色或者绿色的内容, 而是在它们外部包裹一个外围元素来容纳这些内容区域, 而滚动的就是这个"容器";

 

下面再来看一下代码:

html部分

<div class="scrl-wrap">
    <div class="scrl-box f-cb">
        <div class="scrl-ctn elmt1">1</div>
        <div class="scrl-ctn elmt2">2</div>
    </div>
</div>

内容根据实际情况来调整

 

再来看布局, 其实这个会比写js花更多的时间,

<style>
    * {padding:0;margin:0;font-size:0;}
    .scrl-wrap{/* 外层容器, 最关键的一个就是overflow:hidden; */
        width:500px;
        margin:45px auto;
        border:1px solid red;
        overflow:hidden;
    }
    .scrl-wrap .scrl-box {/* "装载"内容的容器 */
        background:pink;width:800%;
    }
    .scrl-wrap .scrl-ctn {/*内容区域, 左浮动, 定宽, 块元素*/
        display:block;float:left;
        width:400px;
        text-align:center;color:#fff;
        font-size:24px;line-height:50px;
    }
    .f-cb:after {/*伪类*/
        display:block;overflow:hidden;visibility:hidden;clear:both;height:0;content:'';
    }
    .scrl-wrap .elmt1 {/*绿色内容*/
        background:green;
        border:1px solid blue;
    }
    .scrl-wrap .elmt2 {/*蓝色内容*/
        background:blue;
        border:1px solid green;
    }
    .scrl-wrap .scrl-box,.scrl-wrap .scrl-ctn {/*内容高度*/
        height:50px;
    }
</style>

在写下js前, 务必将这里看懂, 否则会影响到自己对js的理解.

 

js部分(非插件)

<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    var $scrl = $(".scrl-wrap");
    if($scrl.length>0) {
        var $scrlCtn = $scrl.find(".scrl-box");
        var $elmt1 = $scrl.find(".elmt1");
        var $elmt2 = $scrl.find(".elmt2");
        $scrlCtn.append($elmt1.clone(true)).append($elmt2.clone(true));//复制相同元素到内容区域, 避免出现空白
        var $sclleft = $scrl.scrollLeft();//刚开始为0, 获取滚动元素的滚动距离
        var amTimer = null;
        var w = $elmt1.outerWidth()+$elmt2.outerWidth();//内容区域各个元素宽
        $scrlCtn.css("width", w*2);//内容区域容器的宽为2倍的w ***很重要
        var marquee = function (speed) {
            amTimer = window.setInterval(function () {
                if($scrl.scrollLeft() > w) { // 判断是否已经滚动完毕, 滚动完毕设置滚动元素的滚动距离为0;
                    $sclleft = 0;
                }
                $scrl.scrollLeft(++$sclleft); //滚动
            },speed);
        }
        marquee(10);
        $scrlCtn.mouseover(function () {
            clearInterval(amTimer);
        }).mouseout(function () {
            marquee(10);
        });
    }
})
</script>

 

只是自己的理解, 如有不对, 欢迎大家拍砖!