無縫滾動

時間 2019-11-18

標籤無縫滾動简体版

原文原文鏈接

無縫滾動javascript

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。