我写的简易浮动广告的代码
这个很多网站上都有了,我也自己写了一段简单的代码,直接上代码吧:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body>
<div id="ActiveLayer" style="position:absolute;left:80px;top:121px;width:201px;height:149px;z-index:1;">显示内容</div>
<div style="height:2000px"></div>
<script type="text/javascript">
var interal = 5;
var oldPos,newPos;
var iclock;
var layerX = 100; // 高度
function moveLayer()
{
var oldPos = document.getElementById("ActiveLayer").style.top;
if(!oldPos)
{
oldPos = 0;
}
else if(oldPos.indexOf("px")>0)
{
oldPos = parseInt(oldPos.substring(0,oldPos.length-2));
}
var newPos = document.body.scrollTop + layerX;
if(newPos-oldPos > interal || newPos-oldPos < (interal * -1))
{
if(newPos>oldPos) oldPos += interal; else oldPos -= interal;
document.getElementById("ActiveLayer").style.top = oldPos;
}
else
{
window.clearInterval(iclock);
}
}
window.onscroll = function()
{
window.clearInterval(iclock);
iclock=window.setInterval('moveLayer();',5);
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body>
<div id="ActiveLayer" style="position:absolute;left:80px;top:121px;width:201px;height:149px;z-index:1;">显示内容</div>
<div style="height:2000px"></div>
<script type="text/javascript">
var interal = 5;
var oldPos,newPos;
var iclock;
var layerX = 100; // 高度
function moveLayer()
{
var oldPos = document.getElementById("ActiveLayer").style.top;
if(!oldPos)
{
oldPos = 0;
}
else if(oldPos.indexOf("px")>0)
{
oldPos = parseInt(oldPos.substring(0,oldPos.length-2));
}
var newPos = document.body.scrollTop + layerX;
if(newPos-oldPos > interal || newPos-oldPos < (interal * -1))
{
if(newPos>oldPos) oldPos += interal; else oldPos -= interal;
document.getElementById("ActiveLayer").style.top = oldPos;
}
else
{
window.clearInterval(iclock);
}
}
window.onscroll = function()
{
window.clearInterval(iclock);
iclock=window.setInterval('moveLayer();',5);
}
</script>
</body>
</html>
把上面的代码保存可以看到效果,如果页面标头指定了:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
需要把代码中的document.body.scrollTop 替换为 document.documentElement.scrollTop