집 >웹 프론트엔드 >JS 튜토리얼 >웹사이트 플로팅 광고를 구현하는 JS 코드

웹사이트 플로팅 광고를 구현하는 JS 코드

小云云원래의: 2018-03-30 14:04:413931검색

이 기사에서는 주로 웹 사이트 플로팅 광고를 구현하는 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 코드

관련 기사