高铁站火车站列车时刻表滚动插件

var FlapBuffer = function(wrap, num_lines) {this.wrap = wrap;this.num_lines = num_lines;this.line_buffer = '';this.buffers = [[]];this.cursor = 0;};FlapBuffer.prototype...

东边的小山

1025人浏览 · 2020-04-11 20:59:16

东边的小山 · 2020-04-11 20:59:16 发布

var FlapBuffer = function(wrap, num_lines) {
    this.wrap = wrap;
    this.num_lines = num_lines;
    this.line_buffer = '';
    this.buffers = [[]];
    this.cursor = 0;
};

FlapBuffer.prototype = {

    pushLine: function(line) {

        if (this.buffers[this.cursor].length < this.num_lines) {
           this.buffers[this.cursor].push(line);
        } else {
            this.buffers.push([]);
            this.cursor++;
            this.pushLine(line);
        } 
    },

    pushWord: function(word) {
        if (this.line_buffer.length == 0) {
            this.line_buffer = word;
        } else if ((word.length + this.line_buffer.length + 1) <= this.wrap) {
            this.line_buffer += ' ' + word;
        } else {
            this.pushLine(this.line_buffer);
            this.line_buffer = word;
        }
    },

    flush: function() {
        if (this.line_buffer.length) {
            this.pushLine(this.line_buffer);
            this.line_buffer = '';
        }
    },

};

var FlapDemo = function(display_selector, input_selector, click_selector) {
    var _this = this;

    var onAnimStart = function(e) {
        var $display = $(e.target);
        $display.prevUntil('.flapper', '.activity').addClass('active');
    };

    var onAnimEnd = function(e) {
        var $display = $(e.target);
        $display.prevUntil('.flapper', '.activity').removeClass('active');
    };

    this.opts = {
        chars_preset: 'alphanum',
        align: 'left',
        width: 20,
        on_anim_start: onAnimStart,
        on_anim_end: onAnimEnd
    };

    this.timers = [];

    this.$displays = $(display_selector);
    this.num_lines = this.$displays.length;

    this.line_delay = 300;
    this.screen_delay = 7000;

    this.$displays.flapper(this.opts);

    this.$typesomething = $(input_selector);

    $(click_selector).click(function(e){
        var text = _this.cleanInput(_this.$typesomething.val());
        _this.$typesomething.val('');

        if (text.match(/what is the point/i) || text.match(/what's the point/i)) {
            text = "WHAT'S THE POINT OF YOU?";
        }

        var buffers = _this.parseInput(text);

        _this.stopDisplay();
        _this.updateDisplay(buffers);

        e.preventDefault();
    });
};

FlapDemo.prototype = {

    cleanInput: function(text) {
        return text.trim().toUpperCase();
    },

    parseInput: function(text) {
        var buffer = new FlapBuffer(this.opts.width, this.num_lines);
        var lines = text.split(/\n/);

        for (i in lines) {
            var words = lines[i].split(/\s/);
            for (j in words) {
                buffer.pushWord(words[j]);
            }
            buffer.flush();
        }

        buffer.flush();
        return buffer.buffers;
    },

    stopDisplay: function() {
        for (i in this.timers) {
            clearTimeout(this.timers[i]);
        }

        this.timers = [];
    },

    updateDisplay: function(buffers) {
        var _this = this;
        var timeout = 100;

        for (i in buffers) {

            _this.$displays.each(function(j) {

                var $display = $(_this.$displays[j]);

                (function(i,j) {
                    _this.timers.push(setTimeout(function(){
                        if (buffers[i][j]) {
                            $display.val(buffers[i][j]).change();
                        } else {
                            $display.val('').change();
                        }
                    }, timeout));
                } (i, j));

                timeout += _this.line_delay;
            });

            timeout += _this.screen_delay;
        }
    }

};
$(document).ready(function(){

    new FlapDemo('input.display', '#typesomething', '#showme');

});

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="css/flapper.css" type="text/css" rel="stylesheet" />
	<style type="text/css">
        body {
            font-family: Roboto Condensed;
            color: #333;
        }

        .page {
            width: 1000px;
            margin: 30px auto 0;
        }

        h1 {
            text-align: center;
            font-size: 24px;
        }

        .displays {
            padding: 30px;
            border: 10px solid #ccc;
            background-color: #1134ef;
            border-radius: 30px;
            box-shadow: 0 0 12px 4px #1134ef inset;
        }

        .flapper {
            margin-bottom: 2px;
            text-align: center;
        }

        .inputarea {
            margin: 24px 0;
        }

        #typesomething,
        #showme {
            font-family: Roboto Condensed;
            font-size: 18px;
            padding: 14px;
            background-color: #EEE;
            color: #333;
            border: 0;
            height: 170px;
        }

        #typesomething {
            width: 300px;
        }

        #showme:hover {
            background-color: #DDD;
        }

        #showme:active {
            background-color: #CCC;
        }

        div.inline {
            display: inline-block;
            vertical-align: bottom;
        }

        div.activity {
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background-color: #250000;
            position: relative;
            top: 33px;
            left: -15px;
        }

        div.activity.active {
            background-color: #f00;
        }

        /* Greetz @deadlyicon
         * https://gist.github.com/2191622
         */
        #fork-me {
            width: 180px;
            height: 150px;
            position: absolute;
            top: 0px;
            right: 0px;
            overflow: hidden;
        }

        #fork-me a {
            display: block;
            position: absolute;
            top: 35px;
            right: -75px;
            padding: 0.75em 4em;
            background: #881c15;
            -webkit-transform: rotate(40deg);
            -moz-transform:rotate(40deg);
            -o-transform:rotate(40deg);
            -ms-transform:rotate(40deg);
            color: white !important;
            font-weight: bold;
            font-family: helvetica;
            text-decoration: none;
            border: 1px solid white;
            box-shadow: 0 0 10px black;
            text-shadow: 0 0 10px black;
            white-space: nowrap;
        }

    </style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		
		<div class="htmleaf-content bgcolor-3">
			<div class="page">
	          
	            <div class="displays">
	                <div class="activity"></div><input class="display M" />
	                <div class="activity"></div><input class="display M" />
	                <div class="activity"></div><input class="display M" />
	                <div class="activity"></div><input class="display M" />
	                <div class="activity"></div><input class="display M" />
	                <div class="activity"></div><input class="display M" />
	            </div>
	            <div class="inputarea">
	                <div class="inline"><textarea id="typesomething" placeholder="Type Something Here..." rows="6" cols="20"></textarea></div>
	                <div class="inline"><button id="showme">And Click Here</button></div>
	            </div>
	        </div>
		</div>
	
	</div>
	
	<script src="jquery-1.11.0.min.js"></script>
	<script src="src/jquery.transform-0.9.3.min.js"></script>
	<script src="src/jquery.flapper.js"></script>
    <script src="src/flapdemo.js"></script>
</body>
</html>