漂浮廣告效果(原生JS)

實(shí)現(xiàn)廣告漂浮效果思路:

1.絕對(duì)定位

2 .獲取廣告在可視區(qū)域的最大寬高,找漂浮時(shí)(left,top)的變化規(guī)律

2.獲取元素位置(left、top)

3.設(shè)置新位置值(left,top)

4.將新值賦值給元素

5.根據(jù)漂浮規(guī)律結(jié)合定時(shí)器實(shí)現(xiàn)漂浮效果

6.結(jié)合鼠標(biāo)移入移出事件來停止啟動(dòng)定時(shí)器。

7.廣告關(guān)閉,即點(diǎn)擊事件觸發(fā)隱藏效果(display = ‘none’;)

效果:

廣告漂浮效果

小窗口中效果

代碼如下:

樣式

如有問題歡迎交流。

如轉(zhuǎn)載請(qǐng)注明出處,謝謝!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,091評(píng)論 1 92
  • 我們首先要明白,我們給頁面添加效果用到的js到底是什么?js其實(shí)包含三部分:dom 文檔對(duì)象模型 bom 瀏覽...
    一直以來都很好閱讀 865評(píng)論 0 0
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,741評(píng)論 25 709
  • 一 X型理論假設(shè),人類會(huì)逃避努力,只為金錢和安全感而工作,因此他們需要被控制。而Y型理論假設(shè),對(duì)人類來說,工作與游...
    余悅六六六閱讀 882評(píng)論 0 5
  • 二貨媳婦:“我們以后生三個(gè)孩子吧。” 二貨哥:“唉,兩個(gè)就足夠了。” 二貨媳婦:“三個(gè)!” 二貨哥:“不行,兩個(gè)!...
    老羅xt閱讀 1,401評(píng)論 0 1

友情鏈接更多精彩內(nèi)容