jquery는 디지털 스크롤 효과를 구현합니다.
- php中世界最好的语言원래의
- 2018-04-24 10:39:303834검색
이번에는 디지털 스크롤 특수 효과를 구현하기 위한 jquery를 가져오겠습니다. jquery를 사용하여 디지털 스크롤 특수 효과를 구현하는 데 있어 주의 사항은 무엇입니까? 다음은 실제 사례를 살펴보겠습니다.
구분 기호와 소수점이 있습니다:
구분 기호만:
-
소수점만:
구분자 없음, 소수점 없음:
렌더링 실행:
구체적인 코드는 다음과 같습니다
<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>
믿습니다 당신은 이 기사를 읽었습니다. 더 흥미로운 정보를 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
jQuery는 회전하는 슬라이드 캐러셀 효과를 구현합니다(코드 포함).
jQuery 플러그인은 테이블의 교대 행 색상 변경을 구현하고 마우스와 상호 작용합니다.
위 내용은 jquery는 디지털 스크롤 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.