javascript不间断滚动marquee

我自己写的一段代码，已经注释得非常清楚了，运行例子后你就会清楚的明白是怎么回事

<style>

#demo{overflow: hidden

WIDTH: 70px /*显示区域的宽度*/

height: 50px

border:solid 1px #222222

align:center

margin:auto

}

#demo1 { background: yellow} /*这里是帮助你理解特地加的底色，删去后你就清楚*/

#demo2 { background: red}

p{/*内部滚动条*/

border:solid 2px blue

width:270px

margin:5px 0

}

</style>

<div id="demo" >

<p>

<span id="demo1" >

aaaaaabbbcccccc

</span>

<span id="demo2" >

aaaaaabbb<!-- 这里没必要完全一样 -->

</span>

</p>

</div>

<script>

function Marquee(){

if(demo1.offsetWidth<=demo.scrollLeft) //当demo1完全滚出显示区域时

demo.scrollLeft=0//让内部滚动条p回归原位，造成连续滚动假象

else{

demo.scrollLeft++ //让demo的内部滚动条继续向左滚动1px

}

}

var MyMar=setInterval(Marquee,5)

demo.onmouseover=function() {clearInterval(MyMar)} //当鼠标放在div元素上面时，清除下面的定时执行功能

demo.onmouseout=function() {MyMar=setInterval(Marquee,5)} //每5毫秒执行一次让demo1向左偏移1px的函数

</script>

可以实现匀速、无缝、加链接以及其它的修饰效果，本代码就是实现了这一功能，让文字从右至右平滑滚动，滚动宽度、高度、速度均可以设定。

Js文字向左运动

var

marqueewidth=350

var

marqueeheight=22

var

speed=5

var

marqueecontents='欢迎光临脚本之家

网页特效栏目，精品特效全收罗！'

if

(document.all)

document.write(''+marqueecontents+'')

function

regenerate(){

window.location.reload()

}

function

regenerate2(){

if

(document.layers){

setTimeout("window.onresize=regenerate",450)

intializemarquee()

}

}

function

intializemarquee(){

document.cmarquee01.document.cmarquee02.document.write(''+marqueecontents+'')

document.cmarquee01.document.cmarquee02.document.close()

thelength=document.cmarquee01.document.cmarquee02.document.width

scrollit()

}

function

scrollit(){

if

(document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){

document.cmarquee01.document.cmarquee02.left-=speed

setTimeout("scrollit()",100)

}

else{

document.cmarquee01.document.cmarquee02.left=marqueewidth

scrollit()

}

}

window.onload=regenerate2

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]

由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了.H5里面好像没有什么替代marquee的吧。如果有请共享。互相学习。 下面是js实现代码： body { margin: 0pxfont-size

---