JavaScript實(shí)現(xiàn)跟隨廣告的示例代碼
浮動廣告是目前網(wǎng)站很常見的一種廣告形式,浮動廣告能實(shí)時跟隨用戶的瀏覽,有效的傳達(dá)產(chǎn)品要表達(dá)的意思,達(dá)到很好的傳播效果。那么浮動廣告是怎么實(shí)現(xiàn)的呢,其實(shí)實(shí)現(xiàn)浮動廣告并不難,具體如下:
* { margin: 0; padding: 0; } img { position: absolute; left: 0; } p { text-align: center; line-height: 40px; }
<img src="images/left_ad.png" alt=""> <p>我是正文1</p> <p>我是正文2</p> <p>我是正文3</p> <p>我是正文4</p> <p>我是正文5</p> <p>我是正文6</p> <p>我是正文7</p> <p>我是正文8</p> <p>我是正文9</p> <p>我是正文10</p> <p>我是正文11</p> <p>我是正文12</p> <p>我是正文13</p> <p>我是正文14</p> <p>我是正文15</p> <p>我是正文16</p> <p>我是正文17</p> <p>我是正文18</p> <p>我是正文19</p> <p>我是正文20</p> <p>我是正文21</p> <p>我是正文22</p> <p>我是正文23</p> <p>我是正文24</p> <p>我是正文25</p> <p>我是正文26</p> <p>我是正文27</p> <p>我是正文28</p> <p>我是正文29</p> <p>我是正文30</p> <p>我是正文31</p> <p>我是正文32</p> <p>我是正文33</p> <p>我是正文34</p> <p>我是正文35</p> <p>我是正文36</p> <p>我是正文37</p> <p>我是正文38</p> <p>我是正文39</p> <p>我是正文40</p> <p>我是正文41</p> <p>我是正文42</p> <p>我是正文43</p> <p>我是正文44</p> <p>我是正文45</p> <p>我是正文46</p> <p>我是正文47</p> <p>我是正文48</p> <p>我是正文49</p> <p>我是正文50</p>
//1.拿到需要操作的元素 const oAdImg = document.querySelector("img"); //2.計(jì)算廣告圖片top的值=(視口高度-廣告高度)/2 const screenHeight = getScreen().height; const imgHeight = oAdImg.offsetHeight; const offsetY = (screenHeight - imgHeight) / 2; // console.log(offsetY); //3.將計(jì)算之后的top值,設(shè)置給廣告圖片 // oAdImg.style.top = offsetY + 'px'; easeAnimation(oAdImg, { "top": offsetY }); //4.監(jiān)聽網(wǎng)頁的滾動事件 window.onscroll = function() { //獲取到網(wǎng)頁滾動的距離 //廣告圖片top的值+網(wǎng)頁滾動的距離 let pageOffsetY = getPageScroll().y; easeAnimation(oAdImg, { "top": offsetY + pageOffsetY }); }; // 瀏覽器視口寬高 function getScreen() { let width, height; if (window.innerWidth) { width = window.innerWidth; height = window.innerHeight; } else if (document.compatMode === "BackCompat") { width = document.body.clientWidth; height = document.body.clientHeight; } else { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; } return { width: width, height: height } } // 緩動動畫 function easeAnimation(ele, obj, fn) { clearInterval(ele.timerId); ele.timerId = setInterval(function() { // flag變量用于標(biāo)記是否所有的屬性都執(zhí)行完了動畫 let flag = true; for (let key in obj) { let target = obj[key]; // 1.拿到元素當(dāng)前的位置 let style = getComputedStyle(ele); let begin = parseInt(style[key]) || 0; // 2.定義變量記錄步長 // 公式: (結(jié)束位置 - 開始位置) * 緩動系數(shù)(0 ~1) let step = (target - begin) * 0.3; // 3.計(jì)算新的位置 begin += step; if (Math.abs(Math.floor(step)) > 1) { flag = false; } else { begin = target; } // 4.重新設(shè)置元素的位置 ele.style[key] = begin + "px"; } //判斷動畫是否執(zhí)行完 if (flag) { //動畫執(zhí)行完后關(guān)閉定時器 clearInterval(ele.timerId); //判斷是否傳入fn函數(shù),有才執(zhí)行反之不執(zhí)行 fn && fn(); } }, 100); } // 網(wǎng)頁滾動距離 function getPageScroll() { let x, y; if (window.pageXOffset) { x = window.pageXOffset; y = window.pageYOffset; } else if (document.compatMode === "BackCompat") { x = document.body.scrollLeft; y = document.body.scrollTop; } else { x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop; } return { x: x, y: y } }
效果圖
到此這篇關(guān)于JavaScript實(shí)現(xiàn)跟隨廣告的示例代碼的文章就介紹到這了,更多相關(guān)JavaScript 跟隨廣告內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實(shí)例【測試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)顯示帶倒影的圖片橫排居中放大展示功能,可實(shí)現(xiàn)點(diǎn)擊圖片及點(diǎn)擊左右按鈕滑動切換的效果,涉及javascript針對鼠標(biāo)事件的響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼
這篇文章主要介紹了BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼,需要的朋友可以參考下2017-05-05js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個方法技巧,需要的朋友可以參考下2015-07-07JavaScript實(shí)現(xiàn)url地址自動檢測并添加URL鏈接示例代碼
寫一個簡單的聊天系統(tǒng),發(fā)出Htpp的Url實(shí)現(xiàn)跳轉(zhuǎn)加上a標(biāo)簽,下面是具體的實(shí)現(xiàn),感興趣的朋友不要錯過2013-11-11JS實(shí)現(xiàn)超簡單的漢字轉(zhuǎn)拼音功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)超簡單的漢字轉(zhuǎn)拼音功能,結(jié)合實(shí)例形式分析了javascript漢字轉(zhuǎn)換成拼音的函數(shù)定義與使用技巧,需要的朋友可以參考下2016-12-12js中如何復(fù)制一個對象并獲取其所有屬性和屬性對應(yīng)的值
如果知道這個對象的所有屬性自然就可以重新new一個,然后對每個屬性賦值,就可以做到,但如果不知道呢?如何創(chuàng)建一個內(nèi)容相同 的對象呢?下面有個不錯的示例,大家可以看看2013-10-10如何使用JavaScript快速創(chuàng)建一個1到100的數(shù)組
平時寫代碼時,我們會生產(chǎn)一些測試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關(guān)于如何使用JavaScript快速創(chuàng)建一個1到100數(shù)組的相關(guān)資料,需要的朋友可以參考下2022-08-08