实现marquee滚动（代码示例）-

本篇文章给大家带来的内容是对于实现marquee滚动（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于实现marquee滚动（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

配景：marquee标签在有些阅读器兼容性欠好，就手动用原生js实现了下。

横着滚动结果链接描述

    
    
    
    
    
    
    《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》
    



    

        
            
            
                
                    

                        888新快币 xk12*****8抽中
                    

                        88dfdfdfd8新快币 xk1dfdfd2*****8抽中
                    

                        888新快币 xk12*****8抽中
                    

                        888新快币 xk12*****8抽中
                    

                        888新快币 xk12*****8抽中
                    

                        888新快币 xk12*****8抽中

                
            
        
    

    《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》

竖着滚动结果链接描述

    
    
    
    
    
    
    《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》
    



    
        
            
            
                
                    

                        888新快币xk12*****8抽中
                    

                        488新快币xk12*****8抽中
                    

                        188新快币xk12*****8抽中
                    

                        88新快币xk12*****8抽中
                
            
        
    

    《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》

以上就是实现marquee滚动（代码示例）的细致内容，更多请关注 百分百源码网 其它相干文章！