文字或图片上下滚动

最新推荐文章于 2019-07-10 18:03:22 发布

athrunzero

最新推荐文章于 2019-07-10 18:03:22 发布

阅读量2.2k

点赞数 1

分类专栏： javascript 文章标签： javascript 滚动

本文链接：https://blog.csdn.net/yjzhu1987/article/details/7751412

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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有高度。

资源下载地址： http://download.csdn.net/detail/athrunzero/4431661

PS2：博客搬家了，以后不再 CSDN 更新了，见谅。最新博客地址： http://www.cnblogs.com/yjzhu/

athrunzero

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
文字或图片上下滚动

html代码如下：文字或图片上下滚动 ul{height:210px;overflow:hidden;} li{line-height:20px;} 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9
复制链接

扫一扫

专栏目录