recherche

Maison >interface Web >js tutoriel >Code JS pour implémenter des publicités flottantes sur des sites Web

Code JS pour implémenter des publicités flottantes sur des sites Web

小云云
小云云original
2018-03-30 14:04:413931parcourir

Cet article partage principalement avec vous le code JS pour implémenter des publicités flottantes sur des sites Web. Vous pouvez d'abord jeter un œil aux rendus. J'espère que cela pourra vous aider.

Comme le montre l'image

Le bloc jaune se déplacera en haut, en bas, à gauche et à droite du navigateur et pourra être fermé lorsque le. la souris est déplacée vers le haut, elle s'arrêtera

<!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>

Recommandations associées :

JS pour réaliser les effets spéciaux des fenêtres mobiles flottantes (publicités flottantes)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment comprendre correctement le retour en arrière des expressions régulières en jsArticle suivant：Comment comprendre correctement le retour en arrière des expressions régulières en js

Articles Liés

Voir plus