单数字滚动插件
2019-01-02 本文已影响0人
疾走考拉
前言
元旦前，工作中需要写一个单数字滚动的特效，找了半天插件都没有找到，随后自己写了一个，今天整理了一下，分享给大家
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单数字滚动特效</title>
<style>
.test{
width:200px;
height:20px;
overflow:hidden;
line-height:20px;
}
</style>
</head>
<--引用线上的地址-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="rolling.js"></script>
<body>
<div class= 'test'></div>
</body>
<script>
rollingNum_init(1024,'.test',20);
setTimeout(function(){
rollingNum_init(1088,'.test',20);
},3000)
</script>
</html>
以下是rolling.js部分，大概实现思路是利用和高度成比例的margintop，详情看以下代码
var numRolling = {
number: function(digit,obj,type){
digit=digit.toString();
var preval = $(obj).attr('data-val');
if(preval == undefined){
preval = '0';
}
if(digit=='--'){
digit = '0';
}
var num_arr=[];
for(var i = 0;i<digit.length;i++){
num_arr.push(digit.charAt(i));
}
if(preval == '0'){
numRolling.dom(digit,num_arr,obj,type);
return false;
}else{
if(preval !== digit){
if(preval.length==digit.length){
for(var i=0;i<preval.length;i++){
if(preval[i] !== digit[i]){
var scrollTop = 0;
var num = digit[i];
scrollTop=type*num;
$(obj).find("div").eq(i).animate({marginTop: -scrollTop+'px'},1000);
}
}
$(obj).attr("data-val",digit);
}else if(preval.length!==digit.length){
numRolling.dom(digit,num_arr,obj,type);
}
}
}
},
dom: function(val,arr,element,type){
var str = '';
for(var i = 0;i<arr.length;i++){
if(parseInt(arr[i])>=0){
str += '<div class="l js-l-box digit-container" data-show='+arr[i]+' style="width:11px;float:left">\
<span>0</span>\
<span>1</span>\
<span>2</span>\
<span>3</span>\
<span>4</span>\
<span>5</span>\
<span>6</span>\
<span>7</span>\
<span>8</span>\
<span>9</span>\
</div>';
}else{
var fh='';
if(arr[i]=='-'){
fh='fgf-fh';
}
str += '<div class="sign-box l"><span class="fgf '+fh+'">'+arr[i]+'</span></div>';
}
}
$(element).html(str);
numRolling.animation(element,type);
$(element).attr("data-val",val);
},
animation: function(obj,type){
$(obj).find(".js-l-box").each(function(i){
var num = parseInt($(this).data("show"));
var scrollTop = 0;
scrollTop=type*num;
$(this).css("margin-top",0);
$(this).animate({marginTop: -scrollTop+'px'},1000);
});
}
};
function rollingNum_init(val,element,type){
//val :数据字符串格式 element：要放进的html 对象如'.num' type：字体大小
numRolling.number(val,element,type);
}
需要注意的地方：
1、所包裹的父级容器最好和要改变的元素高度一致，并设置overflow：hidden
2、如需考虑更严谨，美观，适配问题，可先设置以上所有span为空，显示的在单独设置内容
完结
1、希望对看完此文章的你有用，有什么问题欢迎指正留言~
2、觉得写的不错的小伙伴记得点赞+关注哦！0.0....
