實現(xiàn)marquee滾動效果的方法-創(chuàng)新互聯(lián)

這篇文章主要介紹實現(xiàn)marquee滾動效果的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供清豐網(wǎng)站建設、清豐做網(wǎng)站、清豐網(wǎng)站設計、清豐網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、清豐企業(yè)網(wǎng)站模板建站服務，十載清豐做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

背景：marquee標簽在有些瀏覽器兼容性不好，就手動用原生js實現(xiàn)了下。

橫著滾動效果鏈接描述

<!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>萬圣節(jié)1101</title>
    <meta name="keywords" content="萬圣節(jié)1101">
    <meta name="description" content="萬圣節(jié)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>

以上是實現(xiàn)marquee滾動效果的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前題目：實現(xiàn)marquee滾動效果的方法-創(chuàng)新互聯(lián)
文章URL：http://redsoil1982.com.cn/article10/deoodo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、小程序開發(fā)、商城網(wǎng)站、定制開發(fā)、網(wǎng)站策劃、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容