javascript左右滚动（跑马灯）-CSDN博客

<html>
<style type="text/css">
body{
margin:0;
padding:0;
background:#fff;
font: 70% Arial, Helvetica, sans-serif;
}
#scrlContainer{
visibility:hidden;
background:#f1f1f1;
position:relative;
overflow:hidden;
width:550px;
height:20px;
line-height:20px;
margin:1em;
}

#scrlContent{
position:absolute;
left:0;
top:0;
white-space:nowrap; /*如何处理空白，nowrap即不换行*/
}
</style>
<script type="text/javascript" language="Javascript">
var scrlSpeed = 1
//decreasing speed for mozilla
scrlSpeed = (document.all) ? scrlSpeed : Math.max(1, scrlSpeed - 1)

function initScroll(container, object) {
if (document.getElementById(container) != null) {
var contObj = document.getElementById(container);
var obj = document.getElementById(object);
contObj.style.visibility = "visible";
contObj.scrlSpeed = scrlSpeed;
widthContainer = contObj.offsetWidth;
obj.style.left = parseInt(widthContainer) + "px";
widthObject = obj.offsetWidth;
interval = setInterval("objScroll('" + container + "','" + object
+ "'," + widthContainer + ")", 20);
contObj.onmouseover = function() {
contObj.scrlSpeed = 0;
}
contObj.onmouseout = function() {
contObj.scrlSpeed = scrlSpeed;
}
}
}

function objScroll(container, object, widthContainer) {
var contObj = document.getElementById(container);
var obj = document.getElementById(object);
widthObject = obj.offsetWidth;
if (parseInt(obj.style.left) > (widthObject * (-1))) {
obj.style.left = parseInt(obj.style.left) - contObj.scrlSpeed + "px";
} else {
obj.style.left = parseInt(widthContainer) + "px";
}
}
</script>
<body οnlοad="initScroll('scrlContainer', 'scrlContent');">
<div id="scrlContainer">
<div id="scrlContent">Some very, very useful information will
appear here, yet it will move around your screen so it will be hard to
read it. But the client wants it, so here it is. </div>
</div>
</body>
</html>