数字滚动（web前端、JQuery）
2019-09-30 本文已影响0人
新世纪好青年
之前项目用的都是数字跳动的动画（animateNumber动画），这次做数字滚动的效果，我找了很多插件都不合适，然后无意间看到别人的代码。这个例子只需要用jquery就好了。直接上代码
数字滚动.png
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,button,textarea,p,th,td{margin:0;padding:0;font-family:"微软雅黑";}
.wordCloudnum{width:100%;padding:50px 0 0 30px;overflow:hidden;}.signatures{float:left;}.zeronum{float:left;}
.zero{display:block;float:left;width:36px;height:52px;background:rgba(6,33,53,1);border:1px solid rgba(43,116,168,0.6);border-radius:2px;
font-size:30px;line-height:52px;text-align:center;margin-right:10px;color:rgba(255,255,255,0.1);}
#signatures .num_Animation{position:relative;display:inline-block;overflow:hidden;width:36px;height:52px;background:rgba(6,33,53,1);
border:1px solid rgba(43,116,168,0.6);border-radius:2px;font-size:30px;line-height:52px;text-align:center;margin-right:10px;}
#signatures span{display:inline-block;line-height:52px;text-align:center;overflow:hidden;color:white;}
#signatures span i{width:36px;height:52px;display:block;text-align:center;font-style:normal;}
</style>
<body>
<div class="wordCloudnum">
<div class="zeronum"></div>
<div id="signatures" class="signatures">
<!--<span class="zero">0</span>
<span class="zero">0</span>
<span class="zerother">1</span>
<span class="zerother">2</span>
<span class="zerother">3</span>
<span class="zerother">4</span>-->
</div>
</div>
</body>
<script>
$(function(){
play(145, "#signatures");
});
/**
* 数字动画
* @param {值} num
* @param {dom例："#num"} dom
* 需要一段css
*/
function play(num, dom) {
var html = '';
$(".zeronum").html("");
var arr = String(num).split('');
var len = arr.length;
if (len < 4) { // 需要多长就写多少，传入的数值不够的用0填充
for (var i = 0; i < 4 - len; i++) {
var htmlStr = '<span class="zero">0</span>';
$(".zeronum").append(htmlStr);
}
}
for (var i = 0; i < len; i++) {
if (arr[i] == '.') {
html += ".";
continue
}
html += '<div id="num_' + i + '" class="num_Animation" data-id="' + i + '">';
html += "<span>";
for (var k = 0; k < 10; k++) {
for (var j = 0; j < 10; j++) {
html += '<i>' + j + '</i>';
}
}
html += "</span>";
html += '</div>';
}
document.querySelector(dom).innerHTML = html;
var num = document.querySelectorAll(".num_Animation");
var spanHeight = num[0].querySelector('span').offsetHeight;
var numlen = num.length;
for (var j = 0; j < numlen; j++) {
var newi = document.createElement('i');
newi.innerHTML = arr[num[j].getAttribute("data-id")];
num[j].querySelector("span").appendChild(newi);
num[j].querySelector("span").style.webkitTransition = 'all ' + (.9 + j * .1) + 's ease-in .1s';
num[j].querySelector("span").style.webkitTransform = 'translate3d(0,-' + spanHeight + 'px,0)';
}
html += "</span>";
html += '</div>';
document.querySelector(dom).innerHTML = html
var num = document.querySelectorAll(".num_Animation");
var spanHeight = num[0].querySelector('span').offsetHeight;
var numlen = num.length;
for (var j = 0; j < numlen; j++) {
var newi = document.createElement('i')
newi.innerHTML = arr[num[j].getAttribute("data-id")];
num[j].querySelector("span").appendChild(newi)
num[j].querySelector("span").style.webkitTransition = 'all ' + (.9 + j * .1) + 's ease-in .1s'
num[j].querySelector("span").style.webkitTransform = 'translate3d(0,-' + spanHeight + 'px,0)'
}
}
</script>
