本篇文章给大家带来的内容是关于实现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>
以上就是实现marquee滚动（代码示例）的详细内容。