<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>
