jquery实现一个数字滚动动画显示效果代码
代码语言：html
所属分类：动画
代码描述：jquery实现一个数字滚动动画显示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
background-color: #09152a;
}
/*-----数字---*/
.number-box{
height: 3.3125em;
display: flex;
justify-content: center;
padding-top: 1em;
}
.mt-number-animate {
line-height: 3.125em;
height: 100%;
overflow: hidden;
display: inline-block;
position: relative;
}
.mt-number-animate .mt-number-animate-dot {
width: 2.25em;
/*设置分割符宽度*/
line-height: 3.125em;
float: left;
text-align: center;
color: #FDB628;
margin-right: 0.5em;
}
.mt-number-animate .mt-number-animate-dom {
width: 2.25em;
/*设置单个数字宽度*/
text-align: center;
float: left;
position: relative;
top: 0;
margin-right: 0.5em;
}
.mt-number-animate .mt-number-animate-dom .mt-number-animate-span {
width: 100%;
float: left;
color: #FDB628;
margin-bottom: 0.2em;
height: 100%;
}
.num-flex{
position: relative;
font-size: 3em;
}
.border-module {
position: relative;
border: 0.0625em solid rgba(0,234,255,.25);
-webkit-box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
}
.number-box .border-span2,
.dataBoc .border-span2{
position: absolute;
width: 0.2em;
height: 0.2em;
}
.number-box .top-left2,
.dataBoc .top-left2{
top: 0;
left: 0;
border-left: 0.045em solid #01bdc6;
border-top: 0.045em solid #01bdc6;
}
.number-box .top-right2,
.dataBoc .top-right2 {
top: 0;
right: 0;
border-right: 0.045em solid #01bdc6;
border-top: 0.045em solid #01bdc6;
}
.number-box .bottom-left2,
.dataBoc .bottom-left2 {
bottom: 0;
left: 0;
border-left: 0.045em solid #01bdc6;
border-bottom: 0.045em solid #01bdc6;
}
.number-box .bottom-right2,
.dataBoc .bottom-right2 {
bottom: 0;
right: 0;
border-right: 0.045em solid #01bdc6;
border-bottom: 0.045em solid #01bdc6;
}
#dataNums{
height: 3.3125em;
}
.dataNums .dataOne{
width:2.25em; height:3.3125em; margin-right: 0.5em; text-align: center;
float: left;list-style: none;
border: 0.0625em solid rgba(0,234,255,.25);
-webkit-box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
box-shadow: inset 0em 0em 1.25em rgb(0 234 255 / 25%);
}
.dataNums .dataBoc {position: relative; width: 100%; height: 100%; overflow: hidden;}
.dataNums .dataBoc .tt {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.dataNums .tt span{width:100%;height:100%;color:#FDB628;font-family: tijian;font-size: 3em;line-height:1.25em;float: left;}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
(function ($) {
$.fn.numberAnimate = function (setting) {
var defaults = {
speed: 1000 * 10, //动画速度
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 = '<div class="mt-number-animate-dom" data-num="{{num}}">\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">0</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">1</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">2</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">3</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">4</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">5</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">6</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">7</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">8</div></div>\
<div class="mt-number-animate-span border-module">\
<span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">9</div></div>\
<div class="mt-number-animate-span border-module"><span class="border-span2 top-left2"></span>\
<span class="border-span2 top-right2"></span>\
<span class="border-span2 bottom-left2"></span>\
<span class="border-span2 bottom-right2"></span><div class="num-flex">.</div></div>\
</div>';
//数字处理
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 = '<div 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 += '<div class="mt-number-animate-dot border-module"><span class="border-span2 top-left2"></span>';
shtml += '<span class="border-span2 top-right2"></span><span class="border-span2 bottom-left2"></span>';
shtml += '<span class="border-span2 bottom-right2"></span><div class="num-flex">' + setting.symbol + '</div></div>' + nHtml.replace("{{num}}", arrStr[i]);
} else {
shtml += nHtml.replace("{{num}}", arrStr[i]);
}
}
shtml += '</div>';
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) / 16 + "em";
if (thisTop != $(this).css("top")) {
if (setting.iniAnimate) {
//HTML5不支持
if (!window.applicat.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0