欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS实现网站悬浮广告的代码

程序员文章站 2022-04-25 23:35:19
...
本文主要和大家分享JS实现网站悬浮广告的代码,大家可以先看一下效果图,希望能帮助到大家。

如图

JS实现网站悬浮广告的代码

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

<!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>
	<p id="ad">广告位招商</p>
</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.onmouseover=function(){
		//清除定时器
		clearInterval(mytime);
	}
	//鼠标移出
	ad.onmouseout=function(){
		mytime=setInterval(fun,100);
	}
</script>
</html>

相关推荐:

JS实现悬浮移动窗口(悬浮广告)的特效

以上就是JS实现网站悬浮广告的代码的详细内容,更多请关注其它相关文章!