marquee js实现&头尾固定中间滑动布局&移动端mate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            font-style: 24px;
        }
        body {
            /*height: auto;
            min-height: 100%;*/
            /*overflow:hidden;*/
            position: absolute;
            bottom: 0;
            top: 0; 
            /*height: 100vh;*//* 在浏览器中有问题 */
            -webkit-overflow-scrolling: touch;
        }
        .content {
            width: 100vw;
            height: 100%;/* 继承body 的高*/
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;                     
        }
        .header {
            width: 100%;
            /*width: 3rem;*/
            height: 3rem;
            background-color: #abcdef;
            overflow-x: hidden;
            white-space:nowrap; 
        }   
        .body {
            width: 100%;
            flex: 1;
            word-wrap:break-word; 
            overflow-y: scroll;
        }
        .footer {
            width: 100%;
            height: 3rem;
            background-color: #123456;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="header">
            <div class="marquee">
                <span class="text">1独到</span>
            </div>
        </div>
        <div class="body">
            bodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybodybody<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            var obj = {};<br/>
            obj__proto__ = base.prototype;<br/>
            base.call(obj);<br/>
            111111111111111111111111111111111111
        </div>
        <div class="footer">
            footer
        </div>
    </div>
    <script src="./jquery-3.3.1.js"></script>
    <script src="marqee.js"></script>
</body>
</html>

function Marquee(time) {
    this.time = time;
    this.width = 0; // 最新宽度
    this.oWidth = 0;// 单个原始长度
    this.init = function () {
        width = $('.text').css("width");
        width = parseInt(width);
        oWidth = width;

        var screenWidth = window.screen.width;
        var times = parseInt(screenWidth/oWidth);
        width = (times + 2)*oWidth;
        var node = $('.text');
        for (var i = 1; i < times+2; i++) {
            $('.text').eq(0).clone().insertAfter(node);
        }
        this.move(time);
    };
    this.move = function (time) {
        var i = 0;
        var len = $('.text').length;
        setInterval(function() {
            i++;
            if (i >= oWidth) {
                i = i - oWidth;
                $('.text').eq(0).insertAfter($('.text').eq(len-1));
            } 
            $('.marquee').css('transform', 'translate3d(-'+i+'px,0,0)');
        },time);
    }
};

var m = new Marquee(16.9);
m.init();

这里写图片描述

marquee js实现&头尾固定中间滑动布局&移动端mate

猜你喜欢