站長資訊網本篇文章給大家帶來的內容是關于實現marquee滾動（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
背景：marquee標簽在有些瀏覽器兼容性不好，就手動用原生js實現了下。
橫著滾動效果鏈接描述
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no" /> <meta content="telephone=no" name="format-detection" /> <title>傳奇無雙1215</title> <meta name="keywords" content="傳奇無雙1215"> <meta name="description" content="傳奇無雙1215"> <script> (function (_D) { var _self = {}; _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; _self.Html = _D.getElementsByTagName("html")[0]; _self.widthProportion = function () { var p = Number((_D.body && _D.body.clientWidth || _self.Html.offsetWidth) / 720).toFixed(3); return p > 1.067 ? 1.067 : p < 0.444 ? 0.444 : p; }; _self.changePage = function () { _self.Html.setAttribute("style", "font-size:" + _self.widthProportion() * 100 + "px"); }; _self.changePage(); if (!document.addEventListener) return; window.addEventListener(_self.resizeEvt, _self.changePage, false); document.addEventListener('DOMContentLoaded', _self.changePage, false); })(document); </script> <style> body { overflow-x: hidden; font: .36rem/1.5 Arial, "Microsoft YaHei", SimSun; margin: 0; padding: 0; font-size: .22rem } body, p { margin: 0; padding: 0; } em { font-style: normal; font-weight: 400 } img { font-size: 0; line-height: 0; border: 0; display: block; width: 100%; } .box { margin: 0 auto; max-width: 720px; width: 100%; background: #260b0c; } .pr { position: relative } .marquee { overflow: hidden; position: absolute; bottom: 11.5%; left: 0; width: 84%; margin: 0 8%; height: .4rem } #m em { float: right; color: #fff } #m { position: absolute; height: 0.4rem; display: block; line-height: .35rem } #m p { float: left; line-height: .4rem; margin-right: 40px; color: #d4be8d } #m span { margin-right: 30px; } </style> </head> <body> <div class="box"> <div class="pr"> <img class="img" src="images/02.jpg" /> <div class="marquee"> <div id="m"> <p> <em>888新快幣</em> <span>xk12*****8抽中</span></p> <p> <em>88dfdfdfd8新快幣</em> <span>xk1dfdfd2*****8抽中</span></p> <p> <em>888新快幣</em> <span>xk12*****8抽中</span></p> <p> <em>888新快幣</em> <span>xk12*****8抽中</span></p> <p> <em>888新快幣</em> <span>xk12*****8抽中</span></p> <p> <em>888新快幣</em> <span>xk12*****8抽中</span></p> </div> </div> </div> </div> <script> var timer; var m = document.getElementById("m") var init_left = document.querySelector(".box").clientWidth * 0.8; var m_left = init_left; var m_width = 0; function setTimer() { timer = setInterval(function () { m_left -= 1; if (m_left <= -m_width + 20) { m_left = init_left; } m.style.left = m_left + 'px' }, 10) } function marquee() { var p = m.querySelectorAll("p"); for (var i = 0, l = p.length; i < l; i++) { m_width += p[i].clientWidth + 48 } console.log(m_width) m.style.width = m_width + 'px' m.style.left = init_left + 'px' setTimer(); m.addEventListener("mouseover", function () { clearInterval(timer); }) m.addEventListener("mouseout", function () { setTimer(); }) } marquee() </script> </body> </html>
豎著滾動效果鏈接描述
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no" /> <meta content="telephone=no" name="format-detection" /> <title>萬圣節1101</title> <meta name="keywords" content="萬圣節1101"> <meta name="description" content="萬圣節1101"> <script> (function (_D) { var _self = {}; _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; _self.Html = _D.getElementsByTagName("html")[0]; _self.widthProportion = function () { var p = Number((_D.body && _D.body.clientWidth || _self.Html.offsetWidth) / 720).toFixed(3); return p > 1.067 ? 1.067 : p < 0.444 ? 0.444 : p; }; _self.changePage = function () { _self.Html.setAttribute("style", "font-size:" + _self.widthProportion() * 100 + "px"); }; _self.changePage(); if (!document.addEventListener) return; window.addEventListener(_self.resizeEvt, _self.changePage, false); document.addEventListener('DOMContentLoaded', _self.changePage, false); })(document); </script> <style> body { margin: 0; padding: 0 } em { font-style: normal; font-weight: 400 } .pr { position: relative } img { font-size: 0; line-height: 0; border: 0; width: 100%; } .box { width: 100%; max-width: 720px; background: #260b0c } .marquee { overflow: hidden; position: absolute; bottom: 17%; left: 0; width: 54%; margin: 0 23%; height: 1.5rem } #m, #m p { font-size: .22rem } #m em { float: right } #m { position: absolute; top: 1.6rem; width: 100% } #m p { color: #c1d1ff } #m em { color: #ffab2a } </style> </head> <body> <div class="box"> <div class="pr"> <img src="images/04.jpg" /> <div class="marquee"> <div id="m"> <p> <em>888新快幣</em>xk12*****8抽中</p> <p> <em>488新快幣</em>xk12*****8抽中</p> <p> <em>188新快幣</em>xk12*****8抽中</p> <p> <em>88新快幣</em>xk12*****8抽中</p> </div> </div> </div> </div> <script> //marquee var timer, m_height; var m = document.getElementById("m") m_height = m.clientHeight; var marquee_height = document.querySelector(".marquee").clientHeight; var m_top = marquee_height; function setTimer() { timer = setInterval(function () { m_top -= 1; if (m_top <= -m_height) { m_top = marquee_height; } m.style.top = m_top + 'px'; }, 10) } function marquee() { setTimer(); m.addEventListener("mouseover", function () { clearInterval(timer); }) m.addEventListener("mouseout", function () { setTimer(); }) } marquee() </script> </body> </html>
