您好,欢迎来到站长目录(28sn.com)!


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

来源:网络整理 浏览:302次 时间:2019-12-15

分享自定义数字滚动效果

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

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

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

推荐站点

  • 我爱发烧音乐我爱发烧音乐

    我爱发烧音乐囊括了从流行音乐到古典音乐多个类型的音乐作品,专栏推荐最新的音乐,提供音乐排名榜单!可供免费线上收听音乐,歌曲流畅,音效极佳! 网站提供的钢琴以及二胡专栏,可供收听者,陶冶情操,改善心情,是难得的轻音乐典藏!

    www.520fs.com
  • 世纪音乐网世纪音乐网

    世纪音乐网是专业的在线音乐试听MP3下载网站。歌曲总计30余万首,收录了网上最新歌曲和流行音乐,DJ舞曲,非主流音乐,经典老歌,劲舞团歌曲,搞笑歌曲,儿童歌曲,英文歌曲等。是您上网听歌的最佳网站。

    www.ssjj.com
  • 怒江大峡谷网怒江大峡谷网

    怒江大峡谷网内容包括:新闻、要闻、怒江报、视频、文化、民俗、人文、音乐、政务、公告、政策等地方信息。

    www.nujiang.cn
  • 杭州网杭州网

      杭州网是杭州地区唯一的新闻门户网站,由中共杭州市委宣传部、杭州日报报业集团和杭州广播电视集团共同组建的杭州网络传媒有限公司运营。

    www.hangzhou.com.cn
  • 深圳在线深圳在线

      深圳在线 www.szol.net是深圳本地最大、最早的地方生活资讯网站之一,网站名“深圳在线www.szol.net”由南方报业传媒集团编辑委员会总编辑、南方日报社总编辑、南方都市报总编辑、南方书画院名誉院长王春芙亲笔题名,深圳在线www.szol.net团队与深圳热线www.szonline.net、奥一网www.oeeee.com都源于全国最早成立于1996年的知名网络公司——深圳万用网。

    www.szol.net

鄂公网安备 42062502000001号