HTML trois minutes pour réaliser une page publicitaire flottante
Tout d'abord, l'effet programme
L'implémentation finale se déplacera librement dans la fenêtre du navigateur, et la réflexion automatique de la limite est rencontrée.Le programme est par curiosité et est uniquement à titre de référence !
Deuxièmement, la mise en œuvre du programme
<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>