【javascript】广告随鼠标移动 | 广告飞动_offset广告根鼠标走-优快云博客

本文链接：https://blog.youkuaiyun.com/jeep_ouc/article/details/17033275

本文介绍了如何使用JavaScript实现网页中广告图片跟随鼠标移动及自动在页面内飞行的效果。通过设置事件监听器来更新广告的位置，并利用定时器实现平滑移动。文章提供了完整的代码示例。

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

广告随鼠标移动

<script type="text/javascript">
	window.onload = function(){   // 广告跟着鼠标移动
		document.body.onmouseover = function(){
			var adNode = document.getElementById("ad");
			adNode.style.left = event.x -10; // event.x 获取鼠标的x坐标
			adNode.style.top = event.y -10;
		}
	}
	function closead(){  //点击广告后，进行关闭
		var adNode = document.getElementById("ad");
		adNode.style.display = "none" ;
	}
</script>

<style type="text/css">
	#bdID{ border:#000000 solid 1px; height:400px; width:600px;}	
</style>

</head>
<body>
	<div id="ad" style="position:absolute; top:0px;left:0px;" οnclick="closead()"><a href="http://www.sina.com" target="_blank"><img src="1.jpg" height="80px" width="100px" /></a></div>
	<div id="bdID">body 区域</div>
</body>

广告飞动

<script type="text/javascript">
	var x=1, y=1,movex=0,movey=0;
	 function movead(){    		
			var adNode = document.getElementById("ad");
			movex = movex + x*5; //控制位置的变化
			movey = movey + y*5;
			adNode.style.left = movex;
			adNode.style.top = movey;
			if(movex+adNode.offsetWidth>=document.body.clientWidth) x = -1 ; //控制广告在body区域内显示
			else if(movex<=0) x = 1;
			if(movey+adNode.offsetHeight>=document.body.clientHeight) y = -1 ;
			else if(movey<=0) y = 1;
	}
	 var timeid;
	 function over(){
		 clearInterval(timeid);
	 }
	 function out(){
		 fly();
	 }
	function fly(){
		timeid = setInterval("movead()",10);  //调用movead()方法
	}
	window.onload = function(){
		fly();
	}
	function closead(){  //点击广告后，进行关闭
		var adNode = document.getElementById("ad");
		adNode.style.display = "none" ;
		over();
	}
</script>

<style type="text/css">
	#bdID{ border:#000000 solid 1px; height:400px; width:600px;}	
</style>

</head>
<body>
	<input type="button" value="手动广告" οnclick="movead()" /><br />
	<div id="ad" style="position:absolute; top:0px;left:0px;" οnmοuseοver="over()" οnmοuseοut="out()">
		<a href="http://www.sina.com" target="_blank"><img src="1.jpg" height="80px" width="100px" /></a>
		<br />
		<a href="javascript:void(0)" οnclick="closead()">关闭</a>
	</div>
	<img src="2.jpg" height="600px" width="700px" border="1px" />
</body>