前端js无缝滚动---解决两个小bug

无缝滚动

网上这么多滚动插件，写这篇博客的意义：一是解决滚动卡顿问题（我不知道有人遇到过么有，我之前的用的scroolTop或者transform或者jque斜体样式ry的animation方法有卡顿现象，无论是google，还是firefox；二是背景颜色问题（因需求，奇偶栏背景不同，若展示总数是奇数，则循环滚动时奇偶栏目颜色需变换）；三是：过年，需求少无聊就随便写写（个人打发时间）。废话不多说直接上代码。

先看下HTML的大致布局

<div class="scroll_view">
    <ul class="list" id="list1">
        <li class="even">1</li>
        <li class="odd">2</li>
        <li class="even">3</li>
        <li class="odd">4</li>
        <li class="even">5</li>
        <li class="odd">6</li>
        <li class="even">7</li>
    </ul>
    <ul class="list" id="list2">
        <li class="even">1</li>
        <li class="odd">2</li>
        <li class="even">3</li>
        <li class="odd">4</li>
        <li class="even">5</li>
        <li class="odd">6</li>
        <li class="even">7</li>
    </ul>
</div>

css样式

		html,body,div,ul,li{
            margin:0;
            padding:0
        }
        .scroll_view{
            height: 180px;
            overflow: hidden;
            margin-top: 20px;
        }
        li{
            list-style:none;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        .even{
            background: lightgoldenrodyellow;
        }
        .odd{
            background: #b9def0;
        }

js代码

		var offHeight = $('.list').height();//获取向上滚动距离
        var childrenlength = $('#list1').children("li").length,//滚动时间（除数）及判断滚动条数的奇偶
        /*滚动的本质：控制元素的css样式的animation 属性*/
        stylecss = "@keyframes move {" +
        "    from {transform: translate(0px,0px)}" +
        "    to {transform: translate(0px,-"+offHeight+"px)}" +
        "}"+
        "@-moz-keyframes move {" +
        "    from {transform: translate(0px,0px)}" +
        "    to {transform: translate(0px,-"+offHeight+"px)}" +
        "}"+
        "@-webkit-keyframes move {" +
        "    from {transform: translate(0px,0px)}" +
        "    to {transform: translate(0px,-"+offHeight+"px)}" +
        "}"+
        "@-o-keyframes move {" +
        "    from {transform: translate(0px,0px)}" +
        "    to {transform: translate(0px,-"+offHeight+"px)}" +
        "}"
    ;
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = stylecss;
        document.getElementsByTagName('head')[0].appendChild(style);
        this.stylesheet = document.styleSheets[document.styleSheets.length-1];
        $('.list').css({
            'animation':'move '+(offHeight/childrenlength)+'s infinite',  //滚动的时间及方式
            "animation-timing-function":"linear"
        });
        /*滚动的本质：控制元素的css样式的animation 属性*/

	    /***变换背景所需操作---只需无缝滚动功能无需以下js代码***/
        if(childrenlength%2 != 0){
            changeBackground($("#list2 li"));
        }
        document.getElementById("list1").addEventListener("webkitAnimationIteration",function () {
            if((childrenlength)%2 != 0){
                changeBackground($("#list1 li"));
                changeBackground($("#list2 li"));
            }
        } );
        function changeBackground($this) {
            $this.each(function () {
                if($(this).hasClass("odd")){
                    $(this).removeClass("odd").addClass("even")
                }else{
                    $(this).removeClass("even").addClass("odd")
                }
            })
        }
        /***变换背景所需操作***/

总结

哦，还是有一个bug的，如果条数过长的话，循环时置顶的这个操作肉眼就能看到，基本上所有的循环滚动（置顶操作）都会遇到这个问题，当然是有解决方法的，自然，思维就要相对的变换才行