實作marquee滾動（程式碼範例）

這篇文章帶給大家的內容是關於實現marquee滾動（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

背景：marquee標籤在有些瀏覽器相容性不好，就手動用原生js實作了下。

橫著捲動效果連結描述

nbsp;html>



    <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>
            <img  class="img lazy" src="/static/imghwm/default1.png" data-src="images/02.jpg" alt="實作marquee滾動（程式碼範例）" >
            <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>



    <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>
            <img  src="/static/imghwm/default1.png" data-src="images/04.jpg" class="lazy" alt="實作marquee滾動（程式碼範例）" >
            <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>

以上是實作marquee滾動（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！