前端js——悬浮、漂浮广告模板、鼠标移入移出事件、定时器控制div运动

最新推荐文章于 2025-06-13 14:41:51 发布

不要生病~

最新推荐文章于 2025-06-13 14:41:51 发布

阅读量3.6k

点赞数 10

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js 悬浮广告鼠标运动

本文链接：https://blog.youkuaiyun.com/qq_41141657/article/details/88581642

前端专栏收录该内容

35 篇文章

订阅专栏

1.布局

广告图，关闭按钮

<div id="box">
			<img src="../HTML/img/关闭.png" id="close" />
 </div>

2.样式

广告大小，固定关闭按钮在广告的右上角

*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 300px;
				height: 200px;
				background-image: url(../HTML/img/b1.jpg);
			}
			#close{
				width: 30px;
				height: 30px;
				float: right;
			}

3.为了移动需给广告设置初始位置

#box{
				position: absolute;
				top: 0;
				left: 0;
			}

4.广告运动

1）设置定时器同时改变top，left值
2）获得元素旧的left top值

var old_left=box.offsetLeft;
var old_top=box.offsetTop;

3）计算新的left,top值（x、y根据运动方向不同改变元素所加的变量）

 var new_left=old_left+x;
 var new_top=old_top+y;

4）将新值赋值回去

box.style.left=new_left+"px";
box.style.top=new_top+"px";

5.判断是否到达边框，到达边框需要反弹

到达左边界，上边界广告都应反弹运动，通过改变旧的left、top值实现
运动过程：右下走，left、top都为正
右上走，left为正、top为负
左下走，left为负，top为正
左上走，left，top都为负
1）判断是否到达边框，首先应获取可视窗口的宽高，作为广告可运动的最大宽高

var max_left=document.documentElement.clientWidth-box.offsetWidth;
var max_top=document.documentElement.clientHeight-box.offsetHeight;

2）判断新的left、top是否等于最大宽高，如果等于改变变量值

if(new_top>=max_top){
                	y=-1;
                }
if(new_top==0){
                	y=1;
                }
if(new_left>=max_left){
                	x=-1;
                }
if(new_left==0){
                	x=1;
                }

6.保障广告不超出页面边界

判断广告新的left、top值是否大于最大宽高或是否小于0，如果成立直接按照到达边界处理

if(new_left>max_left){
                	new_left=max_left;
                }
if(new_top>max_top){
                	new_top=max_top;
                }
if(new_left<0){
                	new_left=0;
                }
if(new_top<0){
                	new_top=0;
                }

7.窗口改变事件

窗口大小改变时，使广告归位,并且重新计算广告的位置
1）窗口大小改变事件

 window.onresize=function(){}

2.重新获取边界值

max_left=document.documentElement.clientWidth-box.offsetWidth;
max_top=document.documentElement.clientHeight-box.offsetHeight;

3）广告回到原位

 box.style.left=0;
 box.style.top=0;

4）重新计算位置

x=1;
y=1;

8.鼠标事件

1）鼠标移入事件

~~#id~~ .onmouseover=function(){}

2）鼠标移入，广告不动清理定时器

clearInterval(time);

3）鼠标移出事件

~~box~~ .onmouseout=function(){}

4）鼠标移出重新执行定时器

补充：觉得代码重复可将定时器中的动作定义成一个函数

9.关闭按钮

1）按钮点击事件

~~#id~~ .onclick=function(){

2)按钮点击时改变广告的状态，使广告隐藏

box.style.display="none";

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 300px;
				height: 200px;
				background-image: url(../HTML/img/b1.jpg);
				/*3.为了移动设置位置*/
				position: absolute;
				top: 0;
				left: 0;
			}
			#close{
				width: 30px;
				height: 30px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="../HTML/img/关闭.png" id="close" />
		</div>

		<script>
			var box=document.getElementById("box");
			var close=document.getElementById("close");
//		    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190315190802144.gif)判断是否到达边框
            var max_left=document.documentElement.clientWidth-box.offsetWidth;
            var max_top=document.documentElement.clientHeight-box.offsetHeight;
//          盒子可到达的最大宽度=可视窗口的最大宽度-盒子的本身宽度
                var x=1;
                var y=1;
			
			function active(){
//				获得元素旧的left top值
				var old_left=box.offsetLeft;
				var old_top=box.offsetTop;
				
//				计算新的left,top值
                var new_left=old_left+x;
                var new_top=old_top+y;
                
                if(new_left>max_left){
                	new_left=max_left;
                }
                if(new_top>max_top){
                	new_top=max_top;
                }
                if(new_left<0){
                	new_left=0;
                }
                if(new_top<0){
                	new_top=0;
                }
           
                
//              将新值赋值回去
                box.style.left=new_left+"px";
                box.style.top=new_top+"px";
                
//              判断
                if(new_top>=max_top){
                	y=-1;
                }
                if(new_top==0){
                	y=1;
                }
                if(new_left>=max_left){
                	x=-1;
                }
                if(new_left==0){
                	x=1;
                }
			}
			
		var time=setInterval(active,10)	
			
    window.onresize=function(){
//  	窗口改变广告归位,重新计算位置
        max_left=document.documentElement.clientWidth-box.offsetWidth;
        max_top=document.documentElement.clientHeight-box.offsetHeight;
        
//      广告回到原位
        box.style.left=0;
        box.style.top=0;
        x=1;
        y=1;
        
    }


        box.onmouseover=function(){
//      	鼠标移入，广告不动清理定时器
            clearInterval(time);
        }
//           鼠标移出
        box.onmouseout=function(){
            time=setInterval(active,10)
        	}


         close.onclick=function(){
         	box.style.display="none";
         }
		</script>
	</body>
</html>

效果

在这里插入图片描述