首页手记 JavaScript动画之无缝流水框

JavaScript动画之无缝流水框

标签：

Html/CSS JavaScript

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>temp</title>
    <link rel="stylesheet" type="text/css" href="../css/demo4.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/demo4.js"></script>
</head>
<body>
    <div id="box">
        <ul id="con1">
            <li>****************1****************</li>
            <li>****************2****************</li>
            <li>****************3****************</li>
            <li>****************4****************</li>
            <li>****************5****************</li>
            <li>****************6****************</li>
            <li>****************7****************</li>
            <li>****************8****************</li>
            <li>****************9****************</li>
        </ul>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
#box{
    width: 350px;
    height: 25px;
    margin: 50px auto;
    border: 4px solid #ccc;
    text-align: center;
    overflow: hidden;
}
#box ul{
    list-style: none;
}
#box ul li{
    height: 25px;
    line-height: 25px;
}

window.onload=function(){
    var timer = null;
    var dtimer = null;
    var speed = 50;
    var dtime = 2000;
    var dheight = 25;
    var box = document.getElementById('box');
    box.scrollTop=0;
    box.innerHTML += box.innerHTML;
    dtimer = setTimeout(startScroll,dtime);

    function startScroll(){
        timer = setInterval(function(){
            box.scrollTop++;
            if(box.scrollTop===box.scrollHeight/2){
                box.scrollTop = 0;
            }
            if(box.scrollTop % dheight ===0){
                clearInterval(timer);
                clearTimeout(dtimer);
                dtimer = setTimeout(startScroll,dtime);
            }
        },speed);
    }
};

点击查看更多内容