JS实现网站悬浮广告

最新推荐文章于 2024-09-28 16:46:37 发布

code301

最新推荐文章于 2024-09-28 16:46:37 发布

阅读量3.3k

点赞数 1

分类专栏： HTML javascript

本文链接：https://blog.csdn.net/AnPHPer/article/details/79670015

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

如图

黄色区块会沿着浏览器的上下左右碰撞移动,可关闭,鼠标移上去会停止

<!doctype html>
<html>
<he>
	<meta charset="utf-8">
	<title>广告</title>
	<style type="text/css">
		*{
			pding:0px;
			margin:0px;
		}
		#ad{
			position:absolute;
			left:0px;
			top:0px;
			width:200px;
			height:50px;
			line-height:50px;
			text-align:center;
			color:black;
			background-color:orange;
			border-rius: 2%;
		}
	</style>
</he>
<body>
	<div id="ad">广告位招商</div>
</body>
<script type="text/javascript">
	//获取img
	ad=document.getElementById("ad");
	//初始化横坐标
	x=0;
	//设置纵坐标
	y=0;
	//设置加速度
	yv=10;
	xv=10;
	function fun(){
		//范围
		//左右
		if(x<0||x>window.innerWidth-ad.offsetWidth){
			xv=-xv;
		}
		//上下
		if(y<0||y>window.innerHeight-ad.offsetHeight){
			yv=-yv;
		}
		x+=xv;
		y+=yv;
		//获取到的x值赋值给ad的left
		ad.style.left=x+"px";
		//获取到的y值赋值给ad的top
		ad.style.top=y+"px";
	}
	mytime=setInterval(fun,100);

	//给ad绑定鼠标移入事件
	ad.οnmοuseοver=function(){
		//清除定时器
		clearInterval(mytime);
	}
	//鼠标移出
	ad.οnmοuseοut=function(){
		mytime=setInterval(fun,100);
	}
</script>
</html>