实现marquee滚动（代码示例）

nbsp;html&gt;    <meta>    <meta>    <meta>    <title>传奇无双1215</title>    <meta>    <meta>    <script>        (function (_D) {            var _self = {};            _self.resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;;            _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(&#39;DOMContentLoaded&#39;, _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>    <div>        <div>            @@##@@            <div>                <div>                    <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 + &#39;px&#39;            }, 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 + &#39;px&#39;            m.style.left = init_left + &#39;px&#39;            setTimer();            m.addEventListener("mouseover", function () {                clearInterval(timer);            })            m.addEventListener("mouseout", function () {                setTimer();            })        }        marquee()    </script>

nbsp;html&gt;    <meta>    <meta>    <meta>    <title>万圣节1101</title>    <meta>    <meta>    <script>        (function (_D) {            var _self = {};            _self.resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;;            _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(&#39;DOMContentLoaded&#39;, _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>    <div>        <div>            @@##@@            <div>                <div>                    <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 + &#39;px&#39;;            }, 10)        }        function marquee() {            setTimer();            m.addEventListener("mouseover", function () {                clearInterval(timer);            })            m.addEventListener("mouseout", function () {                setTimer();            })        }        marquee()    </script>