大屏数据展示之数字滑动动态显示
接到一个大屏数据的需求，要是实时展示用户数，并且动画效果是翻转显示，折腾了半个多小时，写了一个demo出来，上代码
<html>
<head>
<script src="./jquery.min.js"></script>
<style type="text/css">
.colum{
float: left;
text-align: center;
width: 40px;
line-height: 40px;
font-size: 18px;
background: blue;
margin: 10px;
color: white;
height: 40px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="num"></div>
</body>
<script>
function initnum(e, val){
var numarr = (val+'').split('');
var numcontent = '';
for(var i=0;i<numarr.length;i++){
numcontent += '<div class="colum"><div class="row" style="margin-top:'+-numarr[i]*40+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>'
}
$('#'+e).html(numcontent);
}
function animal(e, start, end){
var startarr = (start + '').split('');
var endarr = (end + '').split('');
var instance = endarr.length-startarr.length;
for(var i=0;i<instance;i++){
$('#'+e).prepend('<div class="colum"><div class="row" style="margin-top:'+-(instance-endarr[i])*40+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>')
}
for(var j=0;j<endarr.length;j++){
$($($('#'+e+' .colum')[j]).find('.row')[0]).animate({marginTop: -endarr[j]*40+'px'})
}
}
var numcontroller = {
init: initnum,
animal: animal
}
numcontroller.init('num', 12900);
// numcontroller.animal('num', 12900, 2008900);
function loopanimal(e, start, end, time){
var randomnum = Math.floor(Math.random()*(end-start)/time, 0);
setInterval(function(){
numcontroller.animal(e, start, start-0+randomnum);
start = start+randomnum;
}, 3000);
}
loopanimal('num', 12900, 2008900, 60);
</script>
</html>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-03-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读