原標題：JS實現網站圖片飄窗效果，JavaScript懸浮廣告(附詳細代碼)

JS實現網站圖片飄窗效果，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”);

//定義橫縱坐標

x=0;

y=0;

//設置初始速度

xv=1.5;

yv=1.5;

//根據img橫縱坐標位置，設置反方向速度

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坐標值賦予img css樣式中的left與top

ad.style.left=x+”px”;

ad.style.top=y+”px”;

}

//定時器調用

mytime=setInterval(fun,100);

//ad綁定鼠標懸停事件

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

//清除定時器

clearInterval(mytime);

}

//鼠標離開，重新觸發定時器

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

mytime=setInterval(fun,100);

}

>

推薦閱讀：

html是什么？html與html5有什么區別？

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

以上，就是丁光輝博客，針對“JS實現網站圖片飄窗效果，Java懸浮廣告”問題的解答，歡迎大家加入交流學習群：428773129

本文由鬼叔說運營原創所有，轉載請保留此處：(鬼叔說運營http://www.dingguanghui.com/front-end/js/912.html)

免責聲明：圖片來源網絡，如有侵權請聯系作者及時刪除!返回搜狐，查看更多

責任編輯：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。