我们经常看到许多网站页面，在两侧会有随滚动条一直保持在中间的浮窗，一般都是广告。现在就记录一下实现了兼容 ie与火狐浏览器的浮窗，使用jsp与javascript实现。下面就贴一下代码。
<script type="text/javascript">
lastScrollY = 0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop;
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
document.getElementById("rightDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
//下面这段删除后，对联将不跟随屏幕而移动。
window.setInterval("heartBeat()",1);
</script>
<style type="text/css">
/* 这里定义滴是页面高度，用来测试对联跟随效果滴，跟广告无关 */
html,body{height:2000px;}
#mm{height:1000px;}
/* 这里是设置对联样式滴 */
#leftDiv,#rightDiv{
width:120px; /* 宽度 */
height:250px; /* 高度 */
background-color:#e5e5e5; /* 背景颜色 */
border:1px solid #ddd; /* 边框样式 */
position:absolute; /* 绝对定位激活 */
}
</style>
<body>
<div id="leftDiv" style="top:120px; /* 距离顶部120px */ left:2px; /* 距离左侧2px */ ">左侧广告内容</div>
<div id="rightDiv" style="top:120px; /* 距离顶部120px */ right:2px; /* 距离右侧2px */ ">右侧广告内容</div>
<div id="mm">
</div>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
