首页 何问起 前端特效 htbtn-4 闪电 使用方法

javascript向上滚动(放上鼠标就停)

本文使用Javascript实现DIV的内容不断的向上滚动,当鼠标移动到DIV上时,就停止滚动,当鼠标离开后又继续滚动。
主要使用了JS的setInterval 函数。



以下是完整代码:

<!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>
<title>javascript向上滚动(放上鼠标就停)--柯乐义</title>
</head>
<body>
<div id="keleyi_com" style="overflow:hidden;height:90px;width:350px;border:1px solid silver;padding:5px">
<div id="demo1">
<a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a><br />
<a href="http://www.keleyi.com/menu/javascript/" target="_blank">javascript</a><br />
<a href="http://www.keleyi.com/menu/jquery/" target="_blank">jquery</a><br />
<a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a><br />
<a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a><br />
<a href="http://www.keleyi.com/dev/4d233db8987beb38.htm" target="_blank">jquery四种选择器</a><br />
<a href="http://www.keleyi.com/dev/84501a98b64d8bb8.htm" target="_blank">Javascript获取页面的标题(title)</a><br />
<a href="http://www.keleyi.com/dev/da9ad054d87d5178.htm" target="_blank">jQuery向上弹出导航菜单</a><br />
<a href="http://www.keleyi.com/dev/d4fcaae705f598a.htm" target="_blank">javascript向上滚动(放上鼠标就停)</a><br />
<a href="http://www.keleyi.com" target="_blank">柯乐义</a><br />
</div>
<div id="demo2"></div>
</div>
<script type="text/javascript">
var speed = 50
demo2.innerHTML = demo1.innerHTML
function Marquee() {
if (demo2.offsetTop - keleyi_com.scrollTop <= 0)
keleyi_com.scrollTop -= demo1.offsetHeight
else {
keleyi_com.scrollTop++
}
}
var MyMar = setInterval(Marquee, speed)
keleyi_com.onmouseover = function () { clearInterval(MyMar) }
keleyi_com.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
</body>
</html>

posted @ 2012-12-01 00:21  roucheng  阅读(681)  评论(2编辑  收藏  举报