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

最新推荐文章于 2021-01-11 14:30:04 发布

原创最新推荐文章于 2021-01-11 14:30:04 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #firefox #html #function #文档 #测试

MYSQL 同时被 2 个专栏收录

2 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页元素跟随页面滚动而产生动画效果的方法。通过定时监测页面滚动位置并调整指定元素的位置来营造动画效果。该技术适用于需要增强用户体验的网页设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
asdfffffffffffffffffffffffff 
</div>
<div id="out"></div>
</body>
</html>