无缝滚动 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll</title>
<style type="text/css"> 
dl,dt,dd{margin: 0px ;padding: 0px}
#container{position:relative;margin: 50px auto;width: 100px;border:10px solid #D4D4D4;height: 180px;overflow: hidden;}
dl{}
dl .text,dd .text{ height: 29px;line-height: 29px;border-bottom: 1px solid #D4D4D4;text-align: center;}
</style> 

</head>
<body>
<dl id="container">
    <dt class="orign">
        <div class="text">1</div>
        <div class="text">2</div>
        <div class="text">3</div>
        <div class="text">4</div>
        <div class="text">5</div>
        <div class="text">6</div>
    </dt>
    <dd class="ling">
        
    </dd>
</div>
<script type="text/javascript">
    window.onload=function(){
        var container=document.getElementById("container")
        var original = document.getElementsByTagName("dt")[0];
        var clone = document.getElementsByTagName("dd")[0];
            clone.innerHTML=original.innerHTML;
        var interval=setInterval(function(){
            if(container.scrollTop == clone.offsetTop){      
                container.scrollTop = 0;
             }else{
                    container.scrollTop++;
             }
        },20);

    }
</script>
</body>
</html>

 

posted @ 2014-01-21 13:22  黑暗骑士之“闪”  阅读(117)  评论(0)    收藏  举报