您的位置：首页 > 其它

随滚动条上下滑动的广告效果

2010-03-03 00:01 405 查看
<!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">
var lastScrollY = 0;
function show()
{
var diffY;
if(document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if(document.body)
diffY = document.body.scrollTop;

percent = 0.1*(diffY - lastScrollY); //此处前面的0.1参数是控制滑动的快慢，1为最快，滑动效果几乎没有动；
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);

document.getElementById("test").style.top = parseInt(document.getElementById

("test").style.top) + percent + "px"; //此处不加“px”会导致在firefox下无法运行。

document.getElementById("out").innerHTML = diffY +'-----' + percent;

lastScrollY += percent;
}
window.setInterval("show()",1);
</script>
</head>

<body>
<div id="test" style="position:absolute; top:0px; left:0px; background-color:#FF9900;

width:100px; height:100px;">测试漂浮</div>
<div>
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
asdfffffffffffffffffffffffff<br /><br /><br /><br /><br />
</div>
<div id="out"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航