js无缝滚动代码大全

js无缝滚动代码大全
今天遇到了无缝滚动特效,网上虽然很多,但是合适的很少,今天记录下自己用的:

<!DOCTYPE HTML>
<html>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 

<head>
    <style type="text/css">
        ul{
            /*不要margin否则滚动 会有缝隙*/
            margin:0;
        }
        div {
            /*overflow hidden·否则无法盖住下面的内容*/
            overflow: hidden;
            width: 75px;
            height: 30px;
            margin-left: 29%;
            margin-top: 10%;
            background: aqua;
            border-top: 1px solid red;
            border-bottom: 1px solid red;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无缝滚动</title>
</head>
<body>
<div id="ca">
    <ul id="c1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>

    </ul>
    <ul id="c2"></ul>
</div>
</body>
<script language="javascript" type="text/javascript">
    var c1=document.getElementById("c1");
    var c2=document.getElementById("c2");
    var ca=document.getElementById("ca");
    /*将第一个ul的值赋值给第二个  当第一个头部消失时 由第二个来显示*/
    c2.innerHTML=c1.innerHTML;
    var cas=null;
    window.onload=function(){
        st();
    }
    cas=setInterval('st()',50);
    function st(){
        //clearInterval(cas);
        /*如果滚动长度大于第一个ul的高度  就需要将第一个ul回到原处 */
        if(ca.scrollTop>=c1.offsetHeight){
            ca.scrollTop=0;
        }else{
            ca.scrollTop++;
        }/*鼠标移入就清除清除定时器*/
        ca.onmouseover=function() {
            clearInterval(cas);
        }
        ca.onmouseout=function() {
            cas=setInterval('st()',50);
        }

    }
</script>
</html>

0

评论0

请先

没有账号? 注册  忘记密码?

社交账号快速登录