无缝滚动

来源：互联网发布：有关听力的软件编辑：程序博客网时间：2024/04/27 16:18

   我们在浏览网页的时候经常看到滚动的公告栏，或是图片栏。html标签中marquee标签能实现滚动，但是它的滚动是不连续的，中间有一定的间断，使用js也能轻松实现marquee的滚动效果，而且还能无缝滚动，下面我们就来看看到底是怎么实现的吧。  首先我们的创建一个的div，再在这个div中包两个大小相等的div盒子。然后设置大盒子overflow：hidden;

<html><head>    <title>文字滚动</title>    <style type="text/css">        #con{            width: 200px;            height: 500px;            border: 1px solid red;            overflow: hidden;        }               .con1{            width: 200px;            height: 500px;            background: red;            position: relative;            top:0px;        }            .con2{            width: 200px;            height: 500px;            background: blue;            position: relative;        }    </style></head><body>    <div id='con'>        <div class='con1' id='con1' style="top:0">        </div>        <div class='con2' id='con2' style="top:0">         </div>    </div>  </body></html>

js部分：让两个盒子都向上滚动，当滚动到一定位置的时候让他们初始化

function move(){        var div1=document.getElementById('con1');        var div2=document.getElementById('con2');        if(div1.style.top=='-500px'){             div1.style.top='0px';            div2.style.top='0px;'        }        div1.style.top=parseInt(div1.style.top)-1+'px';        div2.style.top=parseInt(div1.style.top)-1+'px';        console.debug(div2.style.top);    }    setInterval(move,100);

0 0