JQuery custom digital scroll effect

Effect:



JQuery custom numeric scroll effect

First, HTML code

<! DOCTYPE html> <html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/ > <! -- Use the latest version of IE and Chrome first --> <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> number scroll </title> </head> <body> <div id="dataNums"> </div>
    <div id="dataNums2"> </div>
	
<script>
    $(function(){
        $("#dataNums").rollNumDaq({
            deVal:16888
        });

    });
</script>

</body>
</html>Copy the code

2. CSS code

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; }/* Border :0px; */ :-moz-focus-inner{border:0px; }/* Firefox private attributes */ 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; }
Copy the code

Js code

// Number scroll; (function($, window, document) {
    "use strict"; Var defaults = {deVal: 0;'dataNums', // Style name digit:' '// The default display of several digits};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);Copy the code