jQuery活动现场人数翻页统计插件

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

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

以下是 jQuery活动现场人数翻页统计插件的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery活动现场人数翻页统计插件</title>
<link rel="stylesheet" href="style/style.css" media="screen" type="text/css" />
</head>
<body>

<div class="tj_top"></div>
<div class="tj_tit"></div>

<div class="dataStatistics">
	<div class="digit_set"></div>
	<div class="digit_set"></div>
	<div class="digit_set"></div>
	<div class="digit_set"></div>
	<div class="digit_set"></div>
	<div class="digit_set set_last"></div>
</div>

<div class="tj_foot"></div>

<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src="js/jquery.dataStatistics.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.dataStatistics').dataStatistics({min:100,max:1500,time:30000,len:6});
});
</script>
</body>
</html>

JS代码(jquery.dataStatistics.js):

$.fn.dataStatistics = function(options){
	options = $.extend({
	min:100,//初始数值 max:150,//最大数字 time:60000,//时长 len:6 //数字是几位数}
,options ||{
}
);
	var ths = this;
	//解决this指向问题 //初始化---------------------------------------startvar el = ths.find('.set_last');
	var html = '<div class="digit">' + ' <div class="digit_top">' + ' <span class="digit_wrap"></span>' + ' </div>' + ' <div class="shadow_top"></div>' + ' <div class="digit_bottom">' + ' <span class="digit_wrap"></span>' + ' </div>' + ' <div class="shadow_bottom"></div>' + '</div>'//初始化值var nowNums=zfill(options.min,options.len).toString().split("");
	//补0function zfill(num,size){
	var s = "000000000" + num;
	return s.substr(s.length-size);
}
ths.find('.digit_set').each(function(){
	for(i=0;
	i<=9;
	i++){
	$(this).append(html);
	currentDigit = $(this).find('.digit')[i];
	$(currentDigit).find('.digit_wrap').append(i);
}
}
);
	//初始化数值填入 $.each(nowNums,function(index,val){
	var set =ths.find('.digit_set').eq(index);
	var i =parseInt(val) set.find('.digit').eq(i).addClass('active');
	set.find('.digit').eq(i+1).addClass('previous');
}
);
	//初始化---------------------------------------end //执行function run(){
	var difference =options.max-options.min;
	//要执行动画的次数//每次要执行动画的时间var t = options.time/difference;
	//后一位数function increase(){
	//执行次数为0时,停止执行if (difference<1){
	clearInterval(timer1);
	return false;
	console.info('结束')}
difference--;
	console.info(difference);
	//翻页动画 var current = el.find('.active'),previous = el.find('.previous');
	previous.removeClass('previous');
	current.removeClass('active').addClass('previous');
	if (current.next().length == 0){
	el.find('.digit:first-child').addClass('active');
	var prev = el.prev();
	prevNumber(prev);
}
else{
	current.next().addClass('active');
}
}
var timer1 = setInterval(increase,t);
}
//当数字翻到9的时候，前一位数执行一次动画function prevNumber(ths){
	var current = ths.find('.active'),previous = ths.find('.previous');
	previous.removeClass('previous');
	current.removeClass('active').addClass('previous');
	if (current.next().length == 0){
	ths.find('.digit:first-child').addClass('active');
	var prev = ths.prev();
	if (prev.length>0){
	prevNumber(prev);
}
}
else{
	current.next().addClass('active');
}
}
run();
}
;

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
h1,h2,h3,h4,h5,h6{font-size:12px;}
ol,ul{list-style:none;}
table{border-collapse:collapse;}
body,font{font-size:12px;color:#666;font-family:"微软雅黑","宋体";}
a{color:#666;text-decoration:none;outline:none !important;blr:expression(this.onFocus=this.blur());}
a:hover{color:#e50015;cursor:pointer}
img{margin:0;padding:0;border:0;}
body{background:#152442;}
.tj_top{width:457px;height:77px;margin:0 auto;background:url(images/tj_top.png) no-repeat center top;position:relative;z-index:2;}
.tj_tit{width:821px;height:105px;background:url(images/tj_tit.png) no-repeat center top;margin:63px auto 42px;position:relative;z-index:2;}
.tj_foot{width:100%;height:900px;position:fixed;left:0;bottom:0;background:url(images/foot.jpg) no-repeat center bottom;}
.tj_map{width:593px;height:358px;background:url(images/map.png) no-repeat center top;position:relative;z-index:2;margin:50px auto 0 auto;}
.nums_txt{position:absolute;color:#423424;text-align:center;font-size:28px;}
.nums_txt span{font-size:44px;}
.nums_txt1{left:295px;top:132px;width:180px;}
.nums_txt2{left:85px;top:35px;width:200px;}
.nums_txt3{left:105px;top:200px;width:170px;}
/*翻页动画*/
@-webkit-keyframes flipTop{0%{-webkit-transform:perspective(400px) rotateX(0deg);}
100%{-webkit-transform:perspective(400px) rotateX(-90deg);}
}
@-webkit-keyframes flipBottom{0%{-webkit-transform:perspective(400px) rotateX(90deg);}
100%{-webkit-transform:perspective(400px) rotateX(0deg);}
}
@-moz-keyframes flipTop{0%{-moz-transform:perspective(400px) rotateX(0deg);}
100%{-moz-transform:perspective(400px) rotateX(-90deg);}
}
@-moz-keyframes flipBottom{0%{-moz-transform:perspective(400px) rotateX(90deg);}
100%{-moz-transform:perspective(400px) rotateX(0deg);}
}
@-ms-keyframes flipTop{0%{-ms-transform:perspective(400px) rotateX(0deg);}
100%{-ms-transform:perspective(400px) rotateX(-90deg);}
}
@-ms-keyframes flipBottom{0%{-ms-transform:perspective(400px) rotateX(90deg);}
100%{-ms-transform:perspective(400px) rotateX(0deg);}
}
@-keyframes flipTop{0%{transform:perspective(400px) rotateX(0deg);}
100%{transform:perspective(400px) rotateX(-90deg);}
}
@-keyframes flipBottom{0%{transform:perspective(400px) rotateX(90deg);}
100%{transform:perspective(400px) rotateX(0deg);}
}
.dataStatistics{color:#fedec2;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:160px;font-weight:bold;line-height:170px;height:170px;width:746px;margin:0 auto;}
.dataStatistics .seperator{vertical-align:top;margin:0 -20px;display:inline;}
.dataStatistics .seconds,.dataStatistics .minutes,.dataStatistics .hours,.dataStatistics .days{height:100%;display:inline;}
.dataStatistics .digit_set{float:left;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,0.8);border:1px solid #111111;width:120px;height:100%;display:inline-block;position:relative;margin:0 1px;}
.dataStatistics .digit{position:absolute;height:100%;}
.dataStatistics .digit > div{position:absolute;left:0;overflow:hidden;height:50%;width:90px;padding:0 15px;}
.dataStatistics .digit > div.digit_top,.dataStatistics .digit > div.shadow_top{width:120px;background-color:#e38538;border-bottom:1px solid #e38538;box-sizing:border-box;top:0;z-index:0;border-radius:10px 10px 0 0;}
.dataStatistics .digit > div.digit_top:before,.dataStatistics .digit > div.shadow_top:before{content:"";height:100%;width:100%;position:absolute;left:0;top:0;}
.dataStatistics .digit > div.shadow_top{width:120px;opacity:0;-webkit-transition:opacity 0.3s ease-in;}
.dataStatistics .digit > div.digit_bottom,.dataStatistics .digit > div.shadow_bottom{background-color:#e38538;bottom:0;z-index:0;border-radius:0 0 10px 10px;}
.dataStatistics .digit > div.digit_bottom .digit_wrap,.dataStatistics .digit > div.shadow_bottom .digit_wrap{display:block;margin-top:-95%;}
.dataStatistics .digit > div.digit_bottom:before,.dataStatistics .digit > div.shadow_bottom:before{content:"";border-radius:0 0 10px 10px;height:100%;width:100%;position:absolute;left:0;top:0;}
.digit_wrap{line-height:170px;display:block;overflow:hidden;}
.dataStatistics .digit > div.shadow_bottom{opacity:0;-webkit-transition:opacity 0.3s ease-in;}
.dataStatistics .digit.previous .digit_top,.dataStatistics .digit.previous .shadow_top{opacity:1;z-index:2;-webkit-transform-origin:50% 100%;-webkit-animation:flipTop 0.3s ease-in both;-moz-transform-origin:50% 100%;-moz-animation:flipTop 0.3s ease-in both;-ms-transform-origin:50% 100%;-ms-animation:flipTop 0.3s ease-in both;transform-origin:50% 100%;animation:flipTop 0.3s ease-in both;}
.dataStatistics .digit.previous .digit_bottom,.dataStatistics .digit.previous .shadow_bottom{z-index:1;opacity:1;}
.dataStatistics .digit.active .digit_top{z-index:1;}
.dataStatistics .digit.active .digit_bottom{z-index:2;-webkit-transform-origin:50% 0%;-webkit-animation:flipBottom 0.3s 0.3s ease-out both;-moz-transform-origin:50% 0%;-moz-animation:flipBottom 0.3s 0.3s ease-out both;-ms-transform-origin:50% 0%;-ms-animation:flipBottom 0.3s 0.3s ease-out both;transform-origin:50% 0%;animation:flipBottom 0.3s 0.3s ease-out both;}

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