html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>文字或图片上下滚动</title>
<style type="text/css">
ul{height:210px;overflow:hidden;}
li{line-height:20px;}
</style>
</head>
<body>
<ul id="marquee">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
<li>4444444444</li>
<li>5555555555</li>
<li>6666666666</li>
<li>7777777777</li>
<li>8888888888</li>
<li>9999999999</li>
<li>0000000000</li>
</ul>
</body>
</html>
<script type="text/javascript" src="marquee.js"></script>
<script type="text/javascript">
window.onload = function() {
setTimeout("startmarquee(34, 50, 0, 'marquee')", 4000);
}
</script>
js代码如下:
function startmarquee(lh,speed,delay,id) {
var t;
var p = false;
var o = document.getElementById(id);
o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML;
o.onmouseover = function() {
p = true;
}
o.onmouseout = function() {
p = false;
}
o.scrollTop = 0;
function start() {
t = setInterval(scrolling,speed);
if(!p) o.scrollTop += 2;
}
function scrolling() {
if(o.scrollTop%lh != 0) {
o.scrollTop += 2;
if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
} else {
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
参数说明:
lh = line-height
即滚动高度
speed = 滚动速度,数值越小,滚动越快
delay = 多少时间后开始滚动,0为立即滚动,1000为1秒后开始滚动
id = 滚动容器的id名称
PS:图片滚动的话,把文字替换为图片即可(<img src="../images/xxx.jpg" width="100" height="100" alt="" />)
最后需要注意的是:一定要给
滚动容器加上固定高度,否则文字不会滚动,即便容器外层div有高度。