Dieses Mal werde ich Ihnen JQuery zum Implementieren von Digital-Scrolling-Spezialeffekten vorstellen. Was sind die Vorsichtsmaßnahmen für JQuery zum Implementieren von Digital-Scrolling-Spezialeffekten?
Es gibt ein Trennzeichen und einen Dezimalpunkt:
Nur Trennzeichen:
Nur Dezimalpunkt:
Kein Trennzeichen , Kein Dezimalpunkt:
Laufendes Rendern:
Der spezifische Code lautet wie folgt
<html>
<head>
<title>数字滚动插件</title>
<meta charset="gb2312">
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<style>
/*数字滚动插件的CSS可调整样式*/
.mt-number-animate{ font-family: '微软雅黑'; line-height:40px; height: 40px;/*设置数字显示高度*/; font-size: 36px;/*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }
.mt-number-animate .mt-number-animate-dot{ width: 15px;/*设置分割符宽度*/ line-height: 40px; float: left; text-align: center;}
.mt-number-animate .mt-number-animate-dom{ width: 20px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}
.mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}
</style>
</head>
<body>
<br><br>
有分隔符，有小数点：<p class="numberRun"></p> <br><br>
只有分隔符：<p class="numberRun2"></p> <br><br>
只有小数点：<p class="numberRun3"></p> <br><br>
无分隔符，无小数点：<p class="numberRun4"></p>
</body>
<script>
/**
* by Mantou qq:676015863
* 数字滚动插件 v1.0
*/
;(function($) {
$.fn.numberAnimate = function(setting) {
var defaults = {
speed : 1000,//动画速度
num : "", //初始化值
iniAnimate : true, //是否要初始化动画效果
symbol : '',//默认的分割符号，千，万，千万
dot : 0 //保留几位小数点
}
//如果setting为空，就取default的值
var setting = $.extend(defaults, setting);
//如果对象有多个，提示出错
if($(this).length > 1){
alert("just only one obj!");
return;
}
//如果未设置初始化值。提示出错
if(setting.num == ""){
alert("must set a num!");
return;
}
var nHtml = '<p class="mt-number-animate-dom" data-num="{{num}}">\
<span class="mt-number-animate-span">0</span>\
<span class="mt-number-animate-span">1</span>\
<span class="mt-number-animate-span">2</span>\
<span class="mt-number-animate-span">3</span>\
<span class="mt-number-animate-span">4</span>\
<span class="mt-number-animate-span">5</span>\
<span class="mt-number-animate-span">6</span>\
<span class="mt-number-animate-span">7</span>\
<span class="mt-number-animate-span">8</span>\
<span class="mt-number-animate-span">9</span>\
<span class="mt-number-animate-span">.</span>\
</p>';
//数字处理
var numToArr = function(num){
num = parseFloat(num).toFixed(setting.dot);
if(typeof(num) == 'number'){
var arrStr = num.toString().split("");
}else{
var arrStr = num.split("");
}
//console.log(arrStr);
return arrStr;
}
//设置DOM symbol:分割符号
var setNumDom = function(arrStr){
var shtml = '<p class="mt-number-animate">';
for(var i=0,len=arrStr.length; i<len; i++){
if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){
shtml += '<p class="mt-number-animate-dot">'+setting.symbol+'</p>'+nHtml.replace("{{num}}",arrStr[i]);
}else{
shtml += nHtml.replace("{{num}}",arrStr[i]);
}
}
shtml += '</p>';
return shtml;
}
//执行动画
var runAnimate = function($parent){
$parent.find(".mt-number-animate-dom").each(function() {
var num = $(this).attr("data-num");
num = (num=="."?10:num);
var spanHei = $(this).height()/11; //11为元素个数
var thisTop = -num*spanHei+"px";
if(thisTop != $(this).css("top")){
if(setting.iniAnimate){
//HTML5不支持
if(!window.applicationCache){
$(this).animate({
top : thisTop
}, setting.speed);
}else{
$(this).css({
'transform':'translateY('+thisTop+')',
'-ms-transform':'translateY('+thisTop+')', /* IE 9 */
'-moz-transform':'translateY('+thisTop+')', /* Firefox */
'-webkit-transform':'translateY('+thisTop+')', /* Safari 和 Chrome */
'-o-transform':'translateY('+thisTop+')',
'-ms-transition':setting.speed/1000+'s',
'-moz-transition':setting.speed/1000+'s',
'-webkit-transition':setting.speed/1000+'s',
'-o-transition':setting.speed/1000+'s',
'transition':setting.speed/1000+'s'
});
}
}else{
setting.iniAnimate = true;
$(this).css({
top : thisTop
});
}
}
});
}
//初始化
var init = function($parent){
//初始化
$parent.html(setNumDom(numToArr(setting.num)));
runAnimate($parent);
};
//重置参数
this.resetData = function(num){
var newArr = numToArr(num);
var $dom = $(this).find(".mt-number-animate-dom");
if($dom.length < newArr.length){
$(this).html(setNumDom(numToArr(num)));
}else{
$dom.each(function(index, el) {
$(this).attr("data-num",newArr[index]);
});
}
runAnimate($(this));
}
//init
init($(this));
return this;
}
})(jQuery);
$(function(){
//初始化
var numRun = $(".numberRun").numberAnimate({num:'15343242.10', dot:2, speed:2000, symbol:","});
var nums = 15343242.10;
setInterval(function(){
nums+= 3433.24;
numRun.resetData(nums);
},3000);
var numRun2 = $(".numberRun2").numberAnimate({num:'15343242', speed:2000, symbol:","});
var nums2 = 15343242;
setInterval(function(){
nums2+= 1433;
numRun2.resetData(nums2);
},2000);
var numRun3 = $(".numberRun3").numberAnimate({num:'52353434.343', dot:3, speed:2000});
var nums3 = 52353434.343;
setInterval(function(){
nums3+= 454.521;
numRun3.resetData(nums3);
},4000);
var numRun4 = $(".numberRun4").numberAnimate({num:'52353434', speed:2000});
var nums4 = 52353434;
setInterval(function(){
nums4+= 123454;
numRun4.resetData(nums4);
},3500);
});
</script>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !
Empfohlene Lektüre:
jQuery implementiert den rotierenden Folienkarusselleffekt (mit Code)
Das obige ist der detaillierte Inhalt vonjquery implementiert digitale Scrolleffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
