javascript左右滚动（跑马灯）

最新推荐文章于 2025-11-29 13:42:57 发布

转载最新推荐文章于 2025-11-29 13:42:57 发布 · 449 阅读

文章标签：

#javascript #object #function #div #null

Javascript技术专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的网页滚动文字效果的实现方法，通过HTML和JavaScript来创建动态显示的文字内容，使得文字能够在页面上自动水平滚动。

<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 onload="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>