jq跑马灯效果

效果实现：

1)、 scrollLeft()函数的理解

2)、关于可以滚动的元素(初步理解),为内容部分超出了主体 即设置了overflow:hidden/scroll/auto;

 

 

下面是效果中HTML代码：

<div class="loop">
        <ul>
            <li><a href="#">中国网讯昨日17:00，北京市2016年高考平安顺利结束。中国网从北京市教委获悉，从目前情况看，各考区、考点、考场秩序良好，考试平安有序。今年外语科目听力考试期间天气状况良好，外语听力考试顺利进行。</a></li>
        </ul>
</div>

关于css代码描述：

1、设置主体宽度并设置overflow:hidden;

2、参考滚动元素为li，那么li的包裹层ul我们设置他足够大(实现无缝滚动效果)，这里有一点注意的 就是：

    (1) 当li的实际宽度小于主体宽度时 我们最好设置他的min-width为主体的宽度;

    (2) 当li的实际宽度大于主体宽度时 我采用了 li的css中添加 white-space:nowrap; 

 3、js中需要注意几点：

    (1) 设置li的包裹层ul的宽度为足够大 

$(".loop ul").css("width",lw*10);

    (2) 复制li节点实现无缝的一种方法，这里我用的是clone方法

$(".loop ul").append($(".loop li").clone());

4、下面就是实现无缝的主要代码：

var l = 1;
var lw = $(".gonggloop ul li").outerWidth();
$(".gonggloop ul").css("width",lw*10);
$(".gonggloop ul").append($(".gonggloop li").clone());
var time = setInterval(function(){

    $(".gonggloop").scrollLeft(l++);
    if($(".gonggloop").scrollLeft() >= 1150){
        l=0;
    }

},20);

 上述代码中高亮部分为主要参数：

(1) l++ 实现了每次加1个单位的移动距离

(2)1150 这个数值实质上是 li的实际宽度(min-width)的和li与克隆元素的margin距离(li的间距)