[javascript]学习总结——浮动广告特效制作

本文链接：https://blog.csdn.net/ZX422747637/article/details/6496583

[javascript]学习总结——浮动广告特效制作收藏
以带关闭按钮的浮动关高为例，其实现思路如下：

1.在Dreamweaver中创建两个div（绝对）层，一个存放广告图片，一个存放关闭按钮，关闭按钮层要嵌入广告层；

2.通过document.getElementById()方法获取要操作的对象（以上两个层）；

3.用“document.getElementById("adv").style.pixelTop=document.documentElement(body).scrollTop+100”这行代码来动态改变广告层距离浏览器的上边距来实现广告层随着滚轮的浮动。

具体实现代码如下：

（方法一）：

view plaincopy to clipboardprint?
<mce:script type="text/javascript" language="javascript"><!--

Code:

<script>
function move(){
document.getElementById("adv").style.pixelTop=document.documentElement.scrollTop+100;
}
window.οnscrοll=move;
function closeMe(){
document.getElementById("closeMe").style.display="none";
}
</script>
<body>
<div id="adv" style="position:absolution;" mce_style="position:absolution;">广告层
<div id="closeMe" style="position:absolution" mce_style="position:absolution">关闭按钮层</div>
</div>
</body>

（方法二）：

Code:

<script type="text/javascript" language="javascript"><!--
var advInitTop=0;
var closeMeIntitTop=0;
function init(){
advInitTop=document.getElementById("adv").style.pixelTop;
closeMeIntitTop=document.getElementById("closeMe").style.pixelTop;
}
function move(){
document.getElementById("adv").style.pixelTop=advInitTop+document.documentElement.scrollTop;
}
window.οnscrοll=move;
function closeMe(){
document.getElementById("closeMe").style.display="none";
}
--></script>
<body οnlοad="init()">
<div id="adv" style="position:absolution;" mce_style="position:absolution;">广告层
<div id="closeMe" style="position:absolution" mce_style="position:absolution">关闭按钮层</div>
</div>
</body>