无缝滚动效果

分享两个无缝滚动的例子，第一个比较全面，可以设置一下效果，具体大家配置就可以，第二个比较死板

有延迟停留的加载，并且一行一样的滚动

var atea=document.getElementById("box");
var iLiHeight=24;//滚动高度
area.innerHTML+=atea.innerHTML;//重新创建一个滚动替代
var speed=50;
var delay=2000;
var time=null;
function startMove( ){
     atea.scrollTop++;
     time=setInterVal("scrollUp()",speed);
}
function scrollUp(){
     if(area.scrollTop%iLiHeight==0){ //刚好满足一次滚动高度，就停止一下，在滚动
          clearInterVal(time);
          setTimeOut("startMove()",delay);
     }else{
          area.scrollTop++;
          if(area.scrollTop>=area.scrollHeight/2){
               atea.scrollTop=0;
          }
     }
}
setTimeOut("startMove()",2000)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-2.1.4.min.js" type="text/javascript"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: relative;
            left: 50px;
            top: 50px;
            width: 300px;
            height: 200px;
            border: 1px solid grey;
            overflow: hidden;
        }
        #out{
            border: 1px solid grey;
            position: relative;
            left: 50px;
            top: 50px;
            width: 300px;
            height: 150px;
            overflow:hidden;
        }
        li{
            border: 1px solid red;
            background-color: grey;
        }
    </style>
</head>
<body>
<div id="out">
    <ul id="inner">
        <li >1  A really ironic artisan </li>
        <li >2  A really ironic artisan </li>
        <li >3  A really ironic artisan </li>
        <li >4  A really ironic artisan </li>
        <li >5 A really ironic artisan </li>
        <li >6  A really ironic artisan </li>
        <li >7  A really ironic artisan </li>
        <li >8  A really ironic artisan </li>
        <li >9 A really ironic artisan </li>
        <li >10  A really ironic artisan </li>
    </ul>
    <ul >
        <li >1  A really ironic artisan </li>
        <li >2  A really ironic artisan </li>
        <li >3  A really ironic artisan </li>
        <li >4  A really ironic artisan </li>
        <li >5 A really ironic artisan </li>
        <li >6  A really ironic artisan </li>
        <li >7  A really ironic artisan </li>
        <li >8  A really ironic artisan </li>
        <li >9 A really ironic artisan </li>
        <li >10  A really ironic artisan </li>
    </ul>
</div>

</body>
<script>
    $(document).ready(function(){
        var out=$("#out").get(0);
        var inner=$("#inner").get(0);
        var time1=null;
        var flag=true;
        var move=function(){
            time1=setInterval(function(){
                if(out.scrollTop>inner.offsetHeight){
                    out.scrollTop=0;
                }
                out.scrollTop+=1;
            },30);
        };
        move();

        inner.onmouseover=function(e){
            var e=e|| window.e;
            var targetName= e.target|| e.srcElement;
            if(targetName.nodeName.toLocaleLowerCase()==="li"){
                clearInterval(time1);
            }
        };
        inner.onmouseout=function(){
            move();
        }
    });
</script>
</html>

无缝滚动效果

推荐阅读更多精彩内容