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

来源：互联网发布：浪潮java培训编辑：程序博客网时间：2024/05/14 19:15

[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.onscroll=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.onscroll=move;
function closeMe(){
document.getElementById("closeMe").style.display="none";
}
--></script>
<body onload="init()">
<div id="adv" style="position:absolution;" mce_style="position:absolution;">广告层
<div id="closeMe" style="position:absolution" mce_style="position:absolution">关闭按钮层</div>
</div>
</body>

当然方法不限于以上两种。

注：“documentElement符合W3C标准，任何浏览器都支持，而body仅仅支持IE”

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ZX422747637/archive/2010/05/17/5600707.aspx