码迷,mamicode.com
首页 > 其他好文 > 详细

无缝滚动

时间:2019-11-18 16:49:41      阅读:48      评论:0      收藏:0      [点我收藏+]

标签:padding   var   document   element   auto   bsp   UNC   play   code   

无缝滚动

<style>
    *{
        margin:0;
        padding:0;
    }
    #content{
        height:200px;
        width:500px;
        background:pink;
        margin:200px;
        position:relative;
        overflow:hidden;
    }
    #box{
        position: absolute;
        top:0;
        left:10px;
    }
    ul{
        list-style: none;
    }
</style>
<body>
    <div id="content">
        <div id="box">
            <ul id="list">
                <li>孙悟空</li>
                <li>猪八戒</li>
                <li>李白</li>
                <li>诸葛亮</li>
                <li>诸葛孔明</li>
                <li>赵云</li>
                <li>关羽</li>
                <li>张飞</li>
                <li>乞丐</li>
                <li>教头</li>
                <li>纳三少</li>
                <li>车夫</li>
            </ul>
            <ul>
                <li>孙悟空</li>
                <li>猪八戒</li>
                <li>李白</li>
                <li>诸葛亮</li>
                <li>诸葛孔明</li>
                <li>赵云</li>
                <li>关羽</li>
                <li>张飞</li>
                <li>乞丐</li>
                <li>教头</li>
                <li>纳三少</li>
                <li>车夫</li>
            </ul>
        </div>
    </div>
</body>
</html>

<script src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
    // 原生 
    var box = document.getElementById("box");
    var sTop = document.getElementById("list");
    var H = sTop.offsetHeight;//ul的高度
    var num = 0;
    function autoPlay(){
        num--;
        box.style.top = num + "px";
        if(num < -H){
            num = 0;  
        }
    }
    setInterval(autoPlay,70)
    
    
    
    // jquery 
    
    // var H = $("#list").height(); 
    // var num = 0; 
    // function autoplay(){
    //     num--;
    //     $("#box").css("top", num) 
    //     if(num < -H){
    //         num = 0;
    //     }
    // }
    // setInterval(autoplay,70)
</script>

 

无缝滚动

标签:padding   var   document   element   auto   bsp   UNC   play   code   

原文地址:https://www.cnblogs.com/xiaoyaolang/p/11883099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!