Home > Article > Web Front-end > Implement marquee scrolling (code example)

Implement marquee scrolling (code example)

不言forward: 2019-01-02 10:12:474095browse

The content this article brings to you is about implementing marquee scrolling (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Background: The marquee tag is not compatible with some browsers, so I manually implemented it using native js.

Horizontal scrolling effect link description

<!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(&#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>
</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 + &#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>
</body>

</html>

Vertical scrolling effectLink description

<!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(&#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>
</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 + &#39;px&#39;;
            }, 10)
        }

        function marquee() {
            setTimer();
            m.addEventListener("mouseover", function () {
                clearInterval(timer);
            })
            m.addEventListener("mouseout", function () {
                setTimer();
            })
        }
        marquee()
    </script>
</body>
</html>

The above is the detailed content of Implement marquee scrolling (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete

Previous article：H5 uses react components to take pictures and select pictures to uploadNext article：H5 uses react components to take pictures and select pictures to upload

See more

Implement marquee scrolling (code example)

Related articles