jQuery自定义数字滚动效果-创新互联

每日分享效果时间到,今日分享: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, h2, h3, h4, h5, h6, h7, 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);

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。

网站标题:jQuery自定义数字滚动效果-创新互联
文章位置:https://www.cdcxhl.com/article8/dhdoip.html

成都网站建设公司_创新互联,为您提供营销型网站建设品牌网站制作自适应网站品牌网站建设微信小程序网站内链

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设