web 广告浮动碰到边界回弹

最新推荐文章于 2021-11-05 17:17:45 发布

lawlieting

最新推荐文章于 2021-11-05 17:17:45 发布

阅读量1k

点赞数

文章标签： web 漂浮广告

本文链接：https://blog.csdn.net/lawlieting/article/details/62237258

版权

本文介绍了一种实现网页漂浮广告的方法，包括如何让广告在碰到页面边界时反弹，以及如何通过鼠标悬停控制广告的暂停和移动。通过修改广告元素的位置并监听鼠标事件，实现了广告的动态效果和用户交互功能。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
  <head>
    <title>漂浮广告</title>
  </head>
  <body>
    <div id="codefans_net" style="position:absolute">
	  <a href="http://www.baidu.com" target="_blank">
	  <img src="images/logo.jpg" width="200px" height="180px">
	  </a>
	</div>
      </body>
	<script>
	  var x=0,y=0;
	  var xin=true,yin=true;
	  var step=1;
	  var xstep=20;
	  var ystep=5;
	  var delay=10;
	  var obj=document.getElementById("codefans_net");
	  function float(){
	    var L=T=0;
		var R=document.documentElement.clientWidth-200;
		var B=document.documentElement.clientHeight-180;
		/*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