Heim > Artikel > Web-Frontend > JS-Code zur Implementierung von Website-Floating-Werbung

JS-Code zur Implementierung von Website-Floating-Werbung

小云云Original: 2018-03-30 14:04:413873Durchsuche

Dieser Artikel teilt Ihnen hauptsächlich den JS-Code zur Implementierung von Website-Floating-Werbung mit. Ich hoffe, er kann Ihnen helfen.

Wie im Bild gezeigt

Der gelbe Block bewegt sich entlang der oberen, unteren, linken und rechten Seite des Browsers und kann geschlossen werden Wenn die Maus nach oben bewegt wird, stoppt sie

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

Verwandte Empfehlungen:

JS zur Realisierung der Spezialeffekte schwebender mobiler Fenster (schwebende Werbung)

Das obige ist der detaillierte Inhalt vonJS-Code zur Implementierung von Website-Floating-Werbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verstehen Sie das Backtracking regulärer Ausdrücke in js richtigNächster Artikel：So verstehen Sie das Backtracking regulärer Ausdrücke in js richtig

In Verbindung stehende Artikel

Mehr sehen