JavaScript實現(xiàn)跟隨廣告的示例代碼
浮動廣告是目前網(wǎng)站很常見的一種廣告形式,浮動廣告能實時跟隨用戶的瀏覽,有效的傳達產(chǎn)品要表達的意思,達到很好的傳播效果。那么浮動廣告是怎么實現(xiàn)的呢,其實實現(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.計算廣告圖片top的值=(視口高度-廣告高度)/2 const screenHeight = getScreen().height; const imgHeight = oAdImg.offsetHeight; const offsetY = (screenHeight - imgHeight) / 2; // console.log(offsetY); //3.將計算之后的top值,設置給廣告圖片 // 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變量用于標記是否所有的屬性都執(zhí)行完了動畫 let flag = true; for (let key in obj) { let target = obj[key]; // 1.拿到元素當前的位置 let style = getComputedStyle(ele); let begin = parseInt(style[key]) || 0; // 2.定義變量記錄步長 // 公式: (結束位置 - 開始位置) * 緩動系數(shù)(0 ~1) let step = (target - begin) * 0.3; // 3.計算新的位置 begin += step; if (Math.abs(Math.floor(step)) > 1) { flag = false; } else { begin = target; } // 4.重新設置元素的位置 ele.style[key] = begin + "px"; } //判斷動畫是否執(zhí)行完 if (flag) { //動畫執(zhí)行完后關閉定時器 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 } }
效果圖
到此這篇關于JavaScript實現(xiàn)跟隨廣告的示例代碼的文章就介紹到這了,更多相關JavaScript 跟隨廣告內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示特效實例【測試可用】
這篇文章主要介紹了JS實現(xiàn)顯示帶倒影的圖片橫排居中放大展示功能,可實現(xiàn)點擊圖片及點擊左右按鈕滑動切換的效果,涉及javascript針對鼠標事件的響應及頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2016-08-08BootStrap表單驗證 FormValidation 調整反饋圖標位置的實例代碼
這篇文章主要介紹了BootStrap表單驗證 FormValidation 調整反饋圖標位置的實例代碼,需要的朋友可以參考下2017-05-05JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個方法技巧,需要的朋友可以參考下2015-07-07JavaScript實現(xiàn)url地址自動檢測并添加URL鏈接示例代碼
寫一個簡單的聊天系統(tǒng),發(fā)出Htpp的Url實現(xiàn)跳轉加上a標簽,下面是具體的實現(xiàn),感興趣的朋友不要錯過2013-11-11如何使用JavaScript快速創(chuàng)建一個1到100的數(shù)組
平時寫代碼時,我們會生產(chǎn)一些測試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關于如何使用JavaScript快速創(chuàng)建一個1到100數(shù)組的相關資料,需要的朋友可以參考下2022-08-08