首页 >web前端 >js教程 >JS实现网站悬浮广告的代码

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

小云云原创: 2018-03-30 14:04:413910浏览

本文主要和大家分享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实现网站悬浮广告的代码

相关文章