几种浮动广告的制作
例子:
制作浮动的广告图片
< 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.οnscrοll=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.οnscrοll=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
>