原標(biāo)題：JS實(shí)現(xiàn)網(wǎng)站圖片飄窗效果，JavaScript懸浮廣告(附詳細(xì)代碼)

JS實(shí)現(xiàn)網(wǎng)站圖片飄窗效果，Java懸浮廣告，鄭州SEO提供以下代碼，僅供參考：

飄窗效果-丁光輝博客(www.dingguanghui.com)

*{margin:0px;padding:0px}

#ad{position:absolute;left:0px;top:0px;}

< 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”;

}

//定時(shí)器調(diào)用

mytime=setInterval(fun,100);

//ad綁定鼠標(biāo)懸停事件

ad.οnmοuseοver=function(){

//清除定時(shí)器

clearInterval(mytime);

}

//鼠標(biāo)離開，重新觸發(fā)定時(shí)器

ad.οnmοuseοut=function(){

mytime=setInterval(fun,100);

}

>

推薦閱讀：

html是什么？html與html5有什么區(qū)別？

CSS3中em與px怎么換算？rem、em與px的區(qū)別是什么？

以上，就是丁光輝博客，針對(duì)“JS實(shí)現(xiàn)網(wǎng)站圖片飄窗效果，Java懸浮廣告”問題的解答，歡迎大家加入交流學(xué)習(xí)群：428773129

本文由鬼叔說運(yùn)營(yíng)原創(chuàng)所有，轉(zhuǎn)載請(qǐng)保留此處：(鬼叔說運(yùn)營(yíng)http://www.dingguanghui.com/front-end/js/912.html)

免責(zé)聲明：圖片來源網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)聯(lián)系作者及時(shí)刪除!返回搜狐，查看更多

責(zé)任編輯：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。