求JS文字左右滚动代码！不要marquee这个标签！

JavaScript013

求JS文字左右滚动代码！不要marquee这个标签！,第1张

保存成html文件，打开就能看到效果了。

<html>

<head>

<title>left to right</title>

</head>

<script type="text/javascript">

function onload() {

window

.setInterval(

function() {

var marginLeft = document

.getElementById("leftToRight").style.marginLeft

moveAfterLeft = marginLeft.substr(0, marginLeft.length - 2) * 1 + 50

if (moveAfterLeft <screen.width - 150) {

document.getElementById("leftToRight").style.marginLeft = moveAfterLeft

} else {

clearInterval()

}

}, 100)

}

</script>

<body onload="onload()">

<ul>

<li id="leftToRight" style="margin-left: 0width: 100px">left to

right</li>

</ul>

</body>

</html>

<script type="text/javascript">

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

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

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

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

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

</script>

demo的css一定要设定width和overflow:hidden

<div id="demo">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<div id="demo1">

<table width="1000" height="172" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

文字放这里

</td>

</tr>

</table>

</div>

</td>

<td>

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

</td>

</tr>

</table>

</div>

原理demo2复制demo1然后连成一行，demo1滚动完滚动demo2因为内容一样所以看不出来，demo2滚动完滚动demo1

<marquee onmouseover="stop()" onmouseout="start()">当前温度为22度。室内PM2.5为88,建议</marquee>