【HTML】制作一个简单的浮动广告页面

HTML三分钟实现浮动广告页面一、程序效果二、程序实现一、程序效果最终实现会在浏览器窗口内自由移动，遇到边界自动反射，程序出于好奇，仅供参考！二、程序实现<html><head><title> New Document </title><meta NAME="Generator" CONTENT="EditPlus"><meta N

九芒星#

7799人浏览 · 2021-12-03 23:45:51

九芒星# · 2021-12-03 23:45:51 发布

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>