Jquery中文网 www.jquerycn.cn
Jquery中文网 >  前端编程  >  HTML5教程  >  正文 实现marquee滚动(代码示例)

实现marquee滚动(代码示例)

发布时间:2020-05-10   编辑:www.jquerycn.cn
jquery中文网为您提供实现marquee滚动(代码示例)等资源,欢迎您收藏本站,我们将为您提供最新的实现marquee滚动(代码示例)资源
本篇文章给大家带来的内容是关于实现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滚动(代码示例)的详细内容,更多请关注jquery中文网其它相关文章!

-->
  • 本文转载于:segmentfault,如有侵犯,请联系jquerycn@qq.com删除
  • 您可能感兴趣的文章:
    Js 图片滚动的实现方法
    javascript 文字图片上下滚动的示例代码
    html5实现文字轮滚的示例代码
    h5的新增标签和废弃标签
    JavaScript制作滚动字幕
    JS不间断向上滚动效果代码一例
    Javascript 连续滚动字幕的实现代码示例
    js 图片向上滚动效果代码
    js图片无缝平滑滚动实例
    js图片向上滚动实现程序

    [关闭]