您的位置：首页 > Web前端 > JavaScript

javascript左右滚动（跑马灯）

2011-07-05 20:59 169 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript object function div null

相关文章推荐

新的分享

章节导航