大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

web前端入门到实战:自定义数字滚动效果

分享自定义数字滚动效果

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的阳春网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

效果图:
web前端入门到实战:自定义数字滚动效果

一、html代码




    
    
    
    
    
    

    
    

    数字滚动



    
web前端开发学习Q-q-u-n: 767-273-102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

二、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; }/*去掉超链接或按钮点击时出现的虚线框黄se边框*/
::-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;}
web前端开发学习Q-q-u-n: 767-273-102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

三、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 = '
    '; var valLen = options.digit || (options.deVal + '').length; if(obj.find('.'+options.className).length <= 0){ for(var i = 0; i< valLen; i++){ strHtml += '
  • 0 1 2 3 45 6 7 8 90 1 2 3 45 6 7 8 9
  • '; } strHtml += '
'; 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); web前端开发学习Q-q-u-n: 767-273-102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

分享标题:web前端入门到实战:自定义数字滚动效果
当前URL:http://dzwzjz.com/article/pododi.html
在线咨询
服务热线
服务热线:028-86922220
TOP