jquery类似车站班次显示屏插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery类似车站班次显示屏插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery车站班次显示屏特效</title>
    <link href="css/flapper.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.flapper.js"></script>
    <script src="js/flapdemo.js"></script>
    <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: #222;
            border-radius: 30px;
            box-shadow: 0 0 12px 4px #000 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;
        }

        #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>
</head>
<body>
    <div class="page">
        <h1>jquery类似车站班次显示屏插件flapper</h1>
        <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="在这里输入" rows="6" cols="20"></textarea></div>
            <div class="inline"><button id="showme">输入后请点击这里</button></div>
        </div>
    </div>
</body>
</html>

JS代码(flapdemo.js):

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');
}
);

CSS代码(flapper.css):

/* STRUCTURAL STYLES */
.flapper{font-family:Roboto Condensed,sans-serif;font-weight:300;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
.flapper .digit{position:relative;display:inline-block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
.flapper .digit div{position:absolute;text-align:center;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
.flapper .digit .top{top:0px;left:0px;overflow:hidden;}
.flapper .digit .bottom{bottom:0px;left:0px;overflow:hidden;}
/* SIZE STYLES */
/* XXL 96x128 */
.flapper.XXL{font-size:116px;line-height:123px;height:132px;}
.flapper.XXL .digit{border-radius:8px;}
.flapper.XXL .digit div{border-radius:6px;}
.flapper.XXL .digit,.flapper.XXL .digit div{height:128px;width:96px;font-size:inherit;line-height:inherit;}
.flapper.XXL .digit .top{clip:rect(0px,96px,64px,0px);}
.flapper.XXL .digit .bottom{clip:rect(65px,96px,128px,0px);}
/* XL 72x96 */
.flapper.XL{font-size:89px;line-height:92px;height:100px;}
.flapper.XL .digit{border-radius:7px;margin:0 0 0 4px;}
.flapper.XL .digit:first-child{margin:0;}
.flapper.XL .digit div{border-radius:5px;}
.flapper.XL .digit,.flapper.XL .digit div{height:96px;width:72px;font-size:inherit;line-height:inherit;}
.flapper.XL .digit .top{clip:rect(0px,72px,47px,0px);}
.flapper.XL .digit .bottom{clip:rect(48px,72px,96px,0px);}
/* L 54x72 */
.flapper.L{font-size:66px;line-height:70px;height:76px;}
.flapper.L .digit{border-radius:6px;margin:0 0 0 4px;}
.flapper.L .digit:first-child{margin:0;}
.flapper.L .digit div{border-radius:4px;}
.flapper.L .digit,.flapper.L .digit div{height:72px;width:54px;font-size:inherit;line-height:inherit;}
.flapper.L .digit .top{clip:rect(0px,54px,35px,0px);}
.flapper.L .digit .bottom{clip:rect(36px,54px,72px,0px);}
/* M 40x54 (default) */
.flapper{font-size:51px;line-height:52px;height:58px;}
.flapper .digit{border-radius:5px;margin:0 0 0 4px;}
.flapper .digit:first-child{margin:0;}
.flapper .digit div{border-radius:3px;}
.flapper .digit,.flapper .digit div{height:54px;width:40px;font-size:inherit;line-height:inherit;}
.flapper .digit .top{clip:rect(0px,40px,26px,0px);}
.flapper .digit .bottom{clip:rect(27px,40px,54px,0px);}
/* S 30x40 */
.flapper.S{font-size:36px;line-height:39px;height:44px;}
.flapper.S .digit{border-radius:4px;margin:0 0 0 2px;}
.flapper.S .digit:first-child{margin:0;}
.flapper.S .digit div{border-radius:2px;}
.flapper.S .digit,.flapper.S .digit div{height:40px;width:30px;font-size:inherit;line-height:inherit;}
.flapper.S .digit .top{clip:rect(0px,30px,19px,0px);}
.flapper.S .digit .bottom{clip:rect(20px,30px,40px,0px);}
/* XS 24x30 */
.flapper.XS{font-size:28px;line-height:30px;height:34px;}
.flapper.XS .digit{border-radius:3px;margin:0 0 0 2px;}
.flapper.XS .digit:first-child{margin:0;}
.flapper.XS .digit div{border-radius:1px;}
.flapper.XS .digit,.flapper.XS .digit div{height:30px;width:24px;font-size:inherit;line-height:inherit;}
.flapper.XS .digit .top{clip:rect(0px,24px,14px,0px);}
.flapper.XS .digit .bottom{clip:rect(15px,24px,30px,0px);}
/* THEME STYLES */
/* DARK (default) */
.flapper .digit{background-color:#222;border:1px solid #333;}
.flapper .digit div{color:#f0f0f0;padding:0px;background-color:black;}
/* LIGHT */
.flapper.light .digit{border:1px solid #ddd;background-color:#eee;}
.flapper.light .digit div{color:#222;padding:0px;background-color:#f6f6f6;}

附件:下载该文件资源,减少时间成本(增值服务)