HTML三分钟实现浮动广告页面
- 一、程序效果
- 二、程序实现
一、程序效果
最终实现会在浏览器窗口内自由移动,遇到边界自动反射,程序出于好奇,仅供参考!
二、程序实现
<html>
<head>
<title> New Document </title>
<meta NAME="Generator" CONTENT="EditPlus">
<meta NAME="Author" CONTENT="">
<meta NAME="Keywords" CONTENT="">
<meta NAME="Description" CONTENT="">
<script>
var x=50,y=60//浮动广告的初始位置
var xin =true,yin=true; //xin为真则向右运动,否则向左运动,
//yin为真则向下运动,否则向上运动
var step=1;//移动的距离
var delay=10;//移动的时间间隔
function floatAD(){
var L=T=0;//L为左边界T为上边界
var R=document.body.offsetWidth-document.getElementById("fly").offsetWidth;
//层移动到右边界
var B=document.body.offsetHeight-document.getElementById("fly").offsetHeight;
//层移动到下边界
document.getElementById("fly").style.left=x;//层移动后的左边界
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:265px;height:135px;z-index:1;">
<a href="#"><img src="小丑.jpg" width="264" height="134" border="0"></a>
</div>
</body>
</html>
更多推荐
【HTML】制作一个简单的浮动广告页面
发布评论