简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

JS實現網站懸浮廣告的程式碼

小云云
發布： 2018-03-30 14:04:41
原創
3826 人瀏覽過

本文主要跟大家分享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實現網站懸浮廣告的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
javascript 程式碼 廣告
來源：php.cn
上一篇：js裡如何正確理解正規表示式的回溯 下一篇：正規怎麼符合Abba逆向前瞻
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用 AJAX、PHP 和伺服器發送事件從 OpenAI 的 API 串流數據 如何使用伺服器傳送事件(SSE)將資料從上述API串流傳輸到使用JavaScript和PHP的瀏覽器客戶端？我已經研究這個問題好幾個小時了，但我似乎無法弄清楚出了什麼問題。作為參考...
來自於 2023-11-11 12:03:23
0
1
497
未捕獲的類型錯誤：無法設定未定義的屬性（設定'innerHTML”） 我正在嘗試使用php創建一個網頁，在“連續文字框”類別（由我的類別定義）的元素上，單擊時必須啟動一個Javascript函數，該函數應該更改另一個函數的內容id“harta-mod...
來自於 2023-11-08 21:06:09
0
1
278
JavaScript中如何取得CSS/HTML命名顏色的RGB值 我已經建立了一個名為[name-rgb]的Javascript物件。你的基本:namedColors={AliceBlue:[240,248,255],AntiqueWhite:[...
來自於 2023-11-06 09:05:50
0
2
210
為什麼這麼多 JavaScript 腳本要附加隨機數字給事物？碰撞？ 我最近一直在學習JavaScript，並且看到了許多使用Math.rand()附加到連結的範例（Face book.com、可讀性書籤）。這解決了什麼問題？ Readability...
來自於 2023-11-04 20:00:04
0
2
296
識別 JavaScript 中的效能限制 我試圖找到我的Javascript中的瓶頸。基本上我正在開發一個用Javascript編寫的chrome擴展，它需要4-5秒來執行任務。該任務涉及大量程式碼，並且使用開發工具中內建...
來自於 2023-10-31 20:47:17
0
1
229
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！