html数字滚动动画效果,高效的jquery数字滚动特效
本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下:
有分隔符,有小数点:
只有分隔符:
只有小数点:
无分隔符,无小数点:
运行效果图:
具体代码如下
数字滚动插件
/*数字滚动插件的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;}
有分隔符,有小数点:
只有分隔符:
只有小数点:
无分隔符,无小数点:
/**
* 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 = '
0\
1\
2\
3\
4\
5\
6\
7\
8\
9\
.\
';
//数字处理
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 = '
for(var i=0,len=arrStr.length; i
if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){
shtml += '
'+nHtml.replace("{{num}}",arrStr[i]);
}else{
shtml += nHtml.replace("{{num}}",arrStr[i]);
}
}
shtml += '
';
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);
});
代码复制即可运行。
希望本文所述对大家JavaScript程序设计有所帮助。
html数字滚动动画效果,高效的jquery数字滚动特效相关推荐
- qt同时两个动画执行_Qt实现数字滚动动画效果
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html Qt实现数字滚动动画效果 3. ...
- html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...
- matlab车轮滚动动画,Fireworks动画教程:简单制作轮子滚动动画效果
本教程是向大家介绍利用Fireworks简单制作轮子滚动动画效果,方法很简单,主要想通过这一实例向大家介绍fw mx如何让我们的web design变得更easy,希望大家通过本篇教程能有收获! 一直 ...
- android金币动效_Android 仿余额宝数字跳动动画效果完整代码
一:想都不用想的,有图有真相,看着爽了,在看下面源码 二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author ...
- android 文字跳动动画,Android 仿余额宝数字跳动动画效果完整代码
Android 仿余额宝数字跳动动画效果完整代码 发布时间:2020-08-24 06:55:30 来源:脚本之家 阅读:120 作者:曾淘 一:想都不用想的,有图有真相,看着爽了,在看下面源码 二: ...
- html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
当前位置:编程学习 > html/css >> HTML5 实现小车动画效果(Canvas/CSS3/JQuery) HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来 ...
- 查看php文件的效果,HTML5的交互式动画效果文件夹预览查看特效
HTML5交互式动画效果文件夹预览查看特效 HTML5交互式动画效果文件夹预览查看特效是一款当鼠标经过的时候文件夹里面的图片悬停显示预览效果. js代码 (function() { new DeviF ...
- 使用wow.js和animate.css实现页面滚动动画效果
wow.js是一款结合了Animate.css,可以在页面向下滚动时,为页面中的元素加载动画的js. 项目地址:GitHub - graingert/WOW: Reveal CSS animation ...
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...
最新文章
- R语言与数据分析(2)-R语言简介
- gulp项目配置指南
- java--遍历自定义数组
- Netweaver和Windows,Ubuntu的数据共享
- 机器视觉——鱼眼相机成像模型
- 代码调试之-单步调试问题
- Linux操作系统 (二)下载以及安装
- Excel随机数生成
- 计算机开机总要按f1键,为什么开机要按f1键?win7每次开机按f1才能进入系统怎么办...
- java word中插入图片_在Word文档中插入图片
- anaconda安装支持mpi并行化的h5py
- pandas实现分类汇总--小计,总计
- Linux下常用压缩 解压命令和压缩比率对比
- [微传感器]PID控制结合电路的通俗理解
- 单页应用 多页应用的区别
- 网页收录数量与网站排名有关系吗?
- 电商产品精修训练营第3天_ps修复画笔工具_ps修补工具_ps仿制图章工具
- 小文智能意图训练详解
- python自动发邮件报554错误_python3利用网易smtp服务器报554排查原因
- 通过FTP以及SMB实现电脑,手机,ipad的文件同步访问
热门文章
- [pdfbox]pdfbox的使用
- 2022-2028年全球与中国水车行业市场前瞻与投资战略规划分析
- 公司官网深度优化之路,半年时间百度收录网页4000+
- 1.WebApi是什么webApi实现增删改查操作
- 主动变被动9个例句_羽毛球六种反手击球技巧,掌握好了,让你化险为夷,变被动为主动...
- 关于一个字节占几位的问题
- jmeter学习指南之详解US六仔源码开发jmeter线程组
- 蓝桥杯单片机第三届初赛程序设计——“自动售水机”设计任务书
- 2023最让人期待的日历!每个IT技术人必备
- 汽车百科系列之(五): 常见的汽车美容改装误区