jQuery自定义数字滚动效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery自定义数字滚动效果相关的知识，希望对你有一定的参考价值。
每日分享效果时间到，今日分享：jQuery自定义数字滚动效果
效果图：
一、html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!--优先使用 IE 最新版本和 Chrome-->
<meta name="renderer" content="webkit"/>
<meta name="keywords" content="Title"/>
<link href="css/globle.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/num.js"></script>
<title>数字滚动</title>
</head>
<body>
<div id="dataNums"> </div>
<div id="dataNums2"> </div>
<script>
$(function(){
$("#dataNums").rollNumDaq({
deVal:16888
});
});
</script>
</body>
</html>二、css代码
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, dd, dl, dt, li, ol, ul,input,select,button,textarea,tr,td{ padding:0; margin:0; border:none;}
input,button,select,textarea,a,img{outline:none; }
::-moz-focus-inner{border:0px;}
body,html{ width:100%; font-family:"Microsoft YaHei","Arial", "SimSun";}
ul, ul li, ol li, li { list-style:none;}
a, img, input, textarea {border:none;}
a {
text-decoration: none;
}
table { border-collapse: collapse;border-spacing:0;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: ".";clear: both;height: 0;}
* html .clearfix {zoom: 1;}
*:first-child + html .clearfix {zoom: 1;}
.fl { float:left;}
.fr { float:right;}
.none{ display:none;}
.inrow{font-size:0;[;font-size:12px;];*font-size:0;font-family:arial;[;letter-spacing:-3px;];*letter-spacing:normal;*word-spacing:-1px;}
.inrow>li,.inrow span{display:inline-block;*display:inline;*zoom:1;font-size:14px;letter-spacing:normal;word-spacing:normal; }
.dataNums{position: absolute; top:50%; display: block; width:100%; height:75px; margin-top: -37px; text-align:center;}
.dataNums .dataOne{ width:61px; height:75px; margin: 0px 3px; text-align: center; background: url(../images/num-bg.png) no-repeat;}
.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%; font:bold 54px/75px "Arial";color:#ddf0ff;}三、js代码
//数字滚动
;(function($, window, document) {
"use strict";
var defaults = {
deVal: 0, //传入值
className:‘dataNums‘, //样式名称
digit:‘‘ //默认显示几位数字
};
function rollNumDaq(obj, options){
this.obj = obj;
this.options = $.extend(defaults, options);
this.init = function(){
this.initHtml(obj,defaults);
}
}
rollNumDaq.prototype = {
initHtml: function(obj,options){
var strHtml = ‘<ul class="‘ + options.className + ‘ inrow">‘;
var valLen = options.digit || (options.deVal + ‘‘).length;
if(obj.find(‘.‘+options.className).length <= 0){
for(var i = 0; i< valLen; i++){
strHtml += ‘<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span></div></div></li>‘;
}
strHtml += ‘</ul>‘;
obj.html(strHtml);
}
this.scroNum(options);
},
scroNum: function(options){
var number = options.deVal;
var $num_item = $(‘.‘ + options.className).find(‘.tt‘);
var h = $(‘.dataBoc‘).height();
$num_item.css(‘transition‘,‘all 2s ease-in-out‘);
var numberStr = number.toString();
if(numberStr.length <= $num_item.length - 1){
var tempStr = ‘‘;
for(var a = 0; a < $num_item.length - numberStr.length; a++){
tempStr += ‘0‘;
}
numberStr = tempStr + numberStr;
}
var numberArr = numberStr.split(‘‘);
$num_item.each(function(i, item) {
setTimeout(function(){
$num_item.eq(i).css(‘top‘,-parseInt(numberArr[i])*h - h*10 + ‘px‘);
},i*100)
});
}
}
$.fn.rollNumDaq = function(options){
var $that = this;
var rollNumObj = new rollNumDaq($that, options);
rollNumObj.init();
};
})(jQuery, window, document);以上是关于jQuery自定义数字滚动效果的主要内容，如果未能解决你的问题，请参考以下文章