几种浮动广告的制作
例子：制作浮动的广告图片
<head>
<head>
<title>制作浮动的广告图片</title>
<script language="javascript" type="text/javascript">
var advInitTop=0;//使层总置于顶端的初始值
function move()
{
window.document.getElementById("advLayer").style.top=advInitTop+window.document.body.scrollTop;
}
window.onscroll=move;//窗口的滚动事件,当页面滚动时调用move()函数
</script>
</head>
<body >
<div id="advLayer" style="position:absolute;left:16px;top:129px;width:180px;height:230px; z-index:1;">
<img src="images/bt.jpg" width="180" height="230"/>
</div>
</body>
例子:带关闭按钮的浮动的广告图片
<head>
<head>
<title>制作浮动的广告图片</title>
<script language="javascript" type="text/javascript">
//使层总置于顶端的初始值
var advInitTop=0;
var closeInitTop=0;
//获取广告图片所在的层上边距的初始值
function inix()
{
advInitTop=parseInt(window.document.getElementById("advLayer").style.top);
closeInitTop=parseInt(window.document.getElementById("closeLayer").style.top);
}
//使用广告图片所在的层与滚动条同步移动
function move()
{
document.getElementById("advLayer").style.top=advInitTop+parseInt(window.document.body.scrollTop);
document.getElementById("closeLayer").style.top=closeInitTop+parseInt(window.document.body.scrollTop);
}
//隐藏advLaayer closeLayer 并不为被隐藏的对象保留其物理空间
function closeMe()
{
window.document.getElementById("closeLayer").style.display="none";
window.document.getElementById("advLayer").style.display="none";
}
//窗口的滚动事件,当页面滚动时调用move()函数
window.onscroll=move;
</script>
</head>
<body onload="inix()">
<div id="advLayer" style="position:absolute;left:16px;top:80px;width:302px;height:171px; z-index:1;">
<img alt="adv" src="images/lady_0007.jpg" width="302" height="171"/>
</div>
<div id="closeLayer" onclick="closeMe()"style="position:absolute;left:214px;top:230px;width:27px;height:19px;z-index:2;">
<img alt="close" src="images/close.gif"/>
</div>
例子: 动态显示图片
<head>
<title>动态显示图片</title>
<script language="javascript" type="text/javascript">
var arr=new Array();
arr[0]="images/arrow.gif";
arr[1]="images/back.jpg";
arr[2]="images/bt.jpg";
var i=0;
function showPic()
{
if(i>2)
{
i=0;
}
window.document.getElementById("pic").src=arr[i++];
window.setTimeout("showPic()",1000);
}
</script>
</head>
<body onload="showPic()" >
<div id="a" style="left:20px;top:50px;width:200px;height:180px;">
<img id="pic"src="" alt="pic" style="left:20px;top:50px;width:200px;height:180px;" />
</div>
</body>
例子: 飘浮广告
<head>
<head>
<title>飘浮广告</title>
<script language="jscript" type="text/javascript">
//漂浮广告的初始位置
var x=50,y=60;
//xin为真,则向右运动,否则向左运动.
//yin为真,则向右运动,否则向左运协.
var xin=true,yin=true;
//移动的距离
var step=1;
//移动的步长
var delay=10;
function floatAD()
{
//L左边界,T右边界
var L=T=0;
//层移动的右边界
var R=window.document.body.offsetWidth-window.document.getElementById("fly").offsetWidth;
//层移动的下边界
var B=window.document.body.offsetHeight-window.document.getElementById("fly").offsetHeight;
//层移动后的左边界
window.document.getElementById("fly").style.left=x;
//层移动后的上边界
window.document.getElementById("fly").style.top=y;
//判断水平方向
x=x+step*(xin?1:-1);
//到达边界后的处理
if(x<L){xin=true;x=L;}
if(x>R){xin=false;x=R}
//判断生直方向
y=y+step*(yin?1:-1);
//到达边界后的处理
if(y<T){yin=true;y=T;}
if(y>B){yin=false;y=B;}
//隔多少时间调用一次
setTimeout("floatAD()",delay);
}
</script>
</head>
<body onload="floatAD()">
<div id="fly" style="position:absolute; left:16px; top:80px; width:295px; height:176px; z-index:1;">
<img src="images/lady_0007.jpg" width="295" height="176"/>
</div>
</body>
</html>