JS實現(xiàn)網(wǎng)站圖片飄窗效果，JavaScript懸浮廣告（附詳細代碼）
時間：2023-09-08 01:54:02 | 來源：網(wǎng)站運營
時間：2023-09-08 01:54:02 來源：網(wǎng)站運營
JS實現(xiàn)網(wǎng)站圖片飄窗效果，JavaScript懸浮廣告（附詳細代碼）：JS實現(xiàn)網(wǎng)站圖片飄窗效果，Java懸浮廣告，
丁光輝博客提供以下代碼，僅供參考：
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>飄窗效果-丁光輝博客（
http://www.dingguanghui.com）</title>
<style type=”text/css”>
*{margin:0px;padding:0px}
#ad{position:absolute;left:0px;top:0px;}
</style>
</head>
<body>
<div id=”ad”><img src=”haha.jpg” /></div>
</body>
< type=”text/java”>
//通過ID獲取img
ad=document.getElementById(“ad”);
//定義橫縱坐標(biāo)
x=0;
y=0;
//設(shè)置初始速度
xv=1.5;
yv=1.5;
//根據(jù)img橫縱坐標(biāo)位置，設(shè)置反方向速度
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;
//將xy坐標(biāo)值賦予img css樣式中的left與top
ad.style.left=x+”px”;
ad.style.top=y+”px”;
}
//定時器調(diào)用
mytime=setInterval(fun,100);
//ad綁定鼠標(biāo)懸停事件
ad.onmouseover=function(){
//清除定時器
clearInterval(mytime);
}
//鼠標(biāo)離開，重新觸發(fā)定時器
ad.onmouseout=function(){
mytime=setInterval(fun,100);
}
</>
</html>
推薦閱讀：html是什么？html與html5有什么區(qū)別？
CSS3中em與px怎么換算？rem、em與px的區(qū)別是什么？
以上，就是丁光輝博客，針對“JS實現(xiàn)網(wǎng)站圖片飄窗效果，Java懸浮廣告”問題的解答，歡迎大家加入交流學(xué)習(xí)群：428773129
本文由鬼叔說運營原創(chuàng)所有，轉(zhuǎn)載請保留此處：(鬼叔說運營)
免責(zé)聲明：圖片來源網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系作者及時刪除!
關(guān)鍵詞：廣告,懸浮,詳細,效果,實現(xiàn),圖片
在線咨詢