(Demo分享)利用原生JavaScript-ScrollLeft-實現做輪播廣告通知
阿新 • • 發佈:2019-06-02
輪播廣告通知整體思路:
1.首先文字的移動利用了JAVA script 中ScrollLeft的知識點;
2.在設定一條一模一樣的新聞,利用無縫輪播圖滾動的原理讓新聞無縫滾動。
3.使用了自執行匿名函式,讓網頁載入後自動開始執行定時器,開始輪播廣告通知。
實現效果:文字實現無縫跑馬燈滾動輪播效果,滑鼠劃入停止滾動,滑鼠移出繼續滾動。
程式碼內有超級詳細的註釋,如有疑問,請留言,會在第一時間回覆!
效果圖:
全部程式碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } html{ width: 100%; height: 100%; /*給網頁設定漸變背景色*/ /*在漸變色之前設定一個背景顏色為純色,第二個設定漸變色會將第一個覆蓋覆蓋,此舉是為了防止一些瀏覽器不相容漸變色*/ background-color: #74ebd5; background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%); } /*內容欄的設定*/ #box{ margin:200px auto 0; padding:0 10px; width:1000px; height:140px; line-height:140px; border-radius: 15px; /*border的dashed 指虛線*/ border:1px dashed green; background:lightgreen; } #box #wrap{ height:140px; overflow:hidden; /*wrap元素裡面的文字禁止換行*/ white-space:nowrap; } #box span{ color:red; font-weight:bold; font-size:50px; } /*讓兩條新聞在同一行,把第二條新聞變成行內塊元素*/ #wrap div{ display:inline-block; font-size: 34px; } </style> </head> <body> <div id='box'> <div id='wrap'> <div id='conBegin'> <span>最新訊息:</span>6月3日上午,中國國防部長魏鳳和發言:如果有人膽敢把臺灣從中國分裂出去,中國軍隊別無選擇,必將不惜一戰,必將不惜一切代價,堅決維護祖國統一。 </div> <!-- 在設定一條一模一樣的新聞,利用無縫輪播圖滾動的原理讓新聞無縫滾動--> <div id='conEnd'> <span>最新訊息:</span>6月3日上午,中國國防部長魏鳳和發言:如果有人膽敢把臺灣從中國分裂出去,中國軍隊別無選擇,必將不惜一戰,必將不惜一切代價,堅決維護祖國統一。 </div> </div> </div> <script> // 這裡這個函式用到自執行匿名函式,前一個括號是一個匿名函式,後一個括號代表立即執行。 // 作用:可以用它建立名稱空間,只要把自己的所有程式碼都寫在這個特殊的函式包裝內,那麼外部就不能訪問,防止程式碼 (function(){ var box = document.getElementById('box'); var conBegin = document.getElementById('conBegin'); var wrap = document.getElementById('wrap'); //利用封裝好的獲取css樣式的函式,來獲取conBegin的寬度 var conBegin_width = getCss(conBegin,'width'); var timer = window.setInterval(move,10); function move(){ // 核心程式碼!!! // scrollLeft:是該元素的顯示(可見)的內容與該元素實際的內容的距離!!! // scrollLeft屬性可以返回或者設定元素內容向左滾動的尺寸。 // 也就是被元素左側所遮擋的尺寸,或者說滾動條向右滾動的距離。 // 返回或者設定的值都是數字,不能帶單位,預設單位是畫素。 // 此屬性相當有用,比如可以用來製作水平無縫滾動效果 // 簡單了說:元素會從scrollLeft的位置顯示該元素的內容。 // 這個屬性只能用於元素設定了overflow的css樣式中,一般和overflow:hideen配合使用 // scrollLeft相當於該元素的顯示(可見)的內容與該元素實際的內容的距離,每執行一次定時就距離加1,就形成了文字滾動效果 wrap.scrollLeft ++; // 如果是wrap元素的顯示的內容與該元素實際的內容的距離。超過盒子的寬度,就讓scrollLeft為0,從頭開始 if(wrap.scrollLeft >= parseInt(conBegin_width)){ wrap.scrollLeft = 0 } } //滑鼠劃過停止定時器 box.onmouseover = function(){ window.clearInterval(timer); } // 滑鼠離開啟動定時器 box.onmouseout = function(){ timer = window.setInterval(move,10) } }()) // 封裝的一個JS獲取CSS樣式的方法,第一個寫需要獲取的元素,第二個獲取的屬性,第三個引數需要更改的樣式 function getCss(obj,attr,value){ var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]; if(arguments.length === 2){ return getStyle; }else if(arguments.length === 3){ obj.style[attr] = value; } } </script> </body> </html>
&n