js 定时定向向上滚动

最新推荐文章于 2022-09-05 08:00:00 发布

Khun_HWJ

最新推荐文章于 2022-09-05 08:00:00 发布

阅读量395

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/Khun_HWJ/article/details/106994255

版权

jquery 专栏收录该内容

160 篇文章 4 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#aaa{border:solid #999 1px; height:278px; width:300px; margin:50px auto; overflow:hidden; box-shadow:0px 0px 10px #ddd;}
.bb{width:280px; height:80px; background:#00FFFF; margin:10px 10px;}
.cc{width:280px; height:80px; background:#FF6633; margin:10px 10px;}
.dd{width:280px; height:80px; background:#CC66CC; margin:10px 10px;}
.ee{width:280px; height:80px; background:#66CC99; margin:10px 10px;}
.ff{width:280px; height:80px; background:#9900CC; margin:10px 10px;}
.gg{width:280px; height:80px; background:#FFFFCC; margin:10px 10px;}
</style>
</head>
<body>
<div id="aaa">
<div id="up_zzjs"><div id="marqueebox">
   <div class="bb"></div>
   <div class="cc"></div>
   <div class="dd"></div>
   <div class="ee"></div>
   <div class="ff"></div>
   <div class="gg"></div>
   </div></div>
</div>
<script type="text/javascript">引用下面的js</script>
</body>
</html>

function startmarquee(lh, speed, delay) {
	var p = false;
	var t;
	var o = document.getElementById("marqueebox");
	o.innerHTML += o.innerHTML;
	o.style.marginTop = 0;
	o.onmouseover = function() {
		p = true;
	}
	o.onmouseout = function() {
		p = false;
	}
	//开始函数
	function start() {
		t = setInterval(scrolling, speed);
		if (!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
	}
	//滚动函数。
	function scrolling() {
		if (parseInt(o.style.marginTop) % lh != 0) {
			o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
			if (Math.abs(parseInt(o.style.marginTop)) >= o.scrollHeight / 2) o.style.marginTop = 0;
		} else {
			clearInterval(t);
			setTimeout(start, delay);
		}
	} //开始执行
	setTimeout(start, delay);
}
//调用函数实例
startmarquee(91, 1, 1000);

Khun_HWJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 定时定向向上滚动

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">#aaa{border:solid #999 1px; height:278px; width:300px; margin:50px auto; overflo.
复制链接

扫一扫