Javascript实现浮动窗口

本文介绍了一种使用HTML和JavaScript创建网页浮动广告窗口的方法。通过调整初始位置、移动幅度及时间间隔等参数,实现了广告窗口在浏览器内的自动移动,并具备鼠标悬停暂停移动的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 今天学习了如何制作网站上得浮动窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<!-- 浮动层 -->
	<div id="ad" style=" position:absolute;">
    	<a href="http://www.baidu.com">
    		<img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" width="220" height="95" border="0">
    	</a>
    </div>
    <script type="text/javascript">
		//定义浮动初始位置
		var x=50,y=50;
		//定义浮动层每次移动的幅度
		var step=1;		//单位为像素
		//定义浮动层每次移动的时间间隔
		var delay=10; //单位为毫秒
		//判断横、纵坐标是否在范围内
		var x_flag=true;
		var y_flag=true;
		//获取浮动层对象
		var floatObj=document.getElementById("ad");
		
		function floatAD(){
			//上、下、左、右四个边界点
			var top_border=0;
			var bottom_border=document.documentElement.clientHeight-floatObj.offsetHeight;
			var left_border=0;
			var right_border=document.body.clientWidth-floatObj.offsetWidth;
			//实现移动,移动的过程其实就是x轴移动一个幅度,y轴移动一个幅度,这里要注意超出边界范围的时候如何处理
			floatObj.style.left = x + document.body.scrollLeft //更新层的X坐标,实现X轴方向上的运动;document.body.scrollLeft为文档区域的滚动条向右拉的距离,以保证在滚动条右拉时层仍在可见范围内 
			floatObj.style.top = y + document.body.scrollTop //更新层的Y坐标,实现Y轴方向上的运动;document.body.scrollTop为文档区域的滚动条向下拉的距离,以保证在滚动条下拉时层仍在可见范围
			x = x+step*(x_flag?1:-1);
			if(x<left_border){
				x_flag=true;
				x=left_border;
			}
			if(x>right_border){
				x_flag=false;
				x=right_border;
			}
			y = y+step*(y_flag?1:-1);
			if(y<top_border){
				y_flag=true;
				y=top_border;
			}
			if(y>bottom_border){
				y_flag=false;
				y=bottom_border;
			}
		} 
		var move = setInterval("floatAD()",delay);
		//鼠标进入图片停止移动
		floatObj.onmouseover=function(){
			clearInterval(move);
		}
		floatObj.onmouseout=function(){
			move=setInterval("floatAD()",delay);
		}
    </script>
</body>
</html>

 

变量解释说明:

浏览器相当于一个坐标轴,左顶点相当于起点(0,0),x轴为横轴,y轴为纵轴

(1)xy变量:定位浮动层初始位置

(2)Step变量:定位每次图片移动的距离,数值越大,移动的幅度就越大

(3)Daley变量:设置移动图片的间隔时间,数值越小,移动的速度就越慢

(4)x_flag , y_flag:用于判断是否超出边界值

(5)floatObj :浮动层对象

(6)top_border , bottom_border , left_border, right_border :分别为上、下、左、右四个边界。

其中上边界和左边界肯定为0,下边界为浏览器的可见高度—浮动层的高度,右边界为浏览器的可见宽度—浮动层的宽度。

编程注意事项:

(1)浮动层必须是绝对定位

(2)移动浮动层其实就是改变浮动层xy轴的坐标位置

(3)在浮动层到达边界点的时候,需要进行往返运动处理

(4)当鼠标停留在浮动层上的时候,需要对间隔执行事件进行清理

(5)当鼠标跳出浮动层的时候,需要重新设置间隔执行时间

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值