简易向上的滚动

最新推荐文章于 2022-02-25 18:19:43 发布

ccyingfu

最新推荐文章于 2022-02-25 18:19:43 发布

阅读量116

点赞数

分类专栏： JavaScript 文章标签： C C++ C# XHTML HTML

本文链接：https://blog.csdn.net/ccyingfu/article/details/83948025

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">

function marQuee(opts){
	var g = function(id){return "string" == typeof id ? document.getElementById(id) : id;},
		c = function(tagName){return document.createElement(tagName)};
	var o = g(opts.id),
		oParent = g(opts.pid),
		pH = oParent.offsetHeight,
		oH = o.offsetHeight,
		tempNum = pH % oH == 0 ? pH/oH : parseInt(pH/oH)+1,
		time = opts.time || 30,
		wT,
		oTemp = c("div");
	oTemp.id = "oTemp";
	for(var i = 0; i < tempNum; i++){
		oTemp.innerHTML += o.innerHTML;
	}
	oParent.appendChild(oTemp);
	function mq(){
		wT = window.setInterval(function(){
			if(oTemp.offsetTop - oParent.scrollTop <= 0){
				oParent.scrollTop -= o.offsetHeight;
			}else{
				oParent.scrollTop++;
			}
		},time);
	}
	mq();
	oParent.onmouseover = function(){window.clearInterval(wT);};
	oParent.onmouseout = function(){mq()};
}

window.onload = function(){
	marQuee({
		id : "test",
		pid : "outter",
		time : 30
	})
}


</script>

</head>

<body >
<div style="height:200px;overflow:hidden;background:#999999;width:400px;border:1px solid black" id="outter">
	<div id="test">
		1111111<br/>222222222<br/>33333333333<br/>44444444444<br/>55555555555<br/><img src='http://www.baidu.com/img/baidu_sylogo1.gif'/>
	</div>
</div>
</body>
</html>