无缝滚动

<div align="center" id="demo" style="overflow:hidden;height:100px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">

<div id="demo1">

第2行<br>第3行<br>第4行<br>第5行<br>第6行<br>第7行<br>第8行<br>第9行<br>第10行<br>第11行<br>第12行<br>第13行<br>第14行<br>第15行<br>第16行<br>第17行<br>第18行<br>第19行<br>第20行<br>

 

</div>

<div id="demo2"></div>

</div>

<script language="javascript" type="text/javascript">

var demo = document.getElementById("demo")

var demo1 = document.getElementById("demo1")

var demo2 = document.getElementById("demo2")

var speed = 30; //数值越大滚动速度越慢

demo2.innerHTML = demo1.innerHTML;

demo.scrollTop = demo.scrollHeight + 'px';

function Marquee() {

// 向下的无缝循环滚动

// if(demo1.offsetTop-demo.scrollTop>=0)

// demo.scrollTop+=demo2.offsetHeight

// else{

// demo.scrollTop--

// }

// 向上的无缝循环滚动

if (demo2.offsetTop - demo.scrollTop <= 0) //当滚动至demo1与demo2交界时

demo.scrollTop -= demo1.offsetHeight //demo跳到最顶端

else {

demo.scrollTop++

}

/*向左的无缝循环滚动

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

*/

/*向右的无缝循环滚动

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

*/

}

var MyMar = setInterval(Marquee, speed);

demo.onmouseover = function () { clearInterval(MyMar) }

demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }