【特效】滚动的数字

最新推荐文章于 2020-12-23 23:38:12 发布

邹大叔

最新推荐文章于 2020-12-23 23:38:12 发布

阅读量966

点赞数

分类专栏：原创文章标签：测试

本文链接：https://blog.csdn.net/zuncle/article/details/54945200

版权

原创专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何创建一个滚动的数字特效，提供了测试代码和演示链接。文章中包含一个名为test.js的JavaScript代码示例，该代码需与jQuery库一同引用到HTML页面中以实现效果。

摘要由CSDN通过智能技术生成

这里写图片描述

演示地址：点我

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .exp{
            width: 620px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            text-align: center;
            letter-spacing: 2px;
            color: #000;
            margin: 0 auto;
            position: relative;
            top: 10px;
        }
        b{
            color: #f00;
            font-size: 18px;
            padding-right: 5px;
        }
        .scrollNum{
            color: #f00;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="exp">
        <span>
            <b>*</b>
            看我在滚耶：<span class="scrollNum"></span>
        </span>
    </div>
    <script src="../js/jquery-1.11.3.js"></script>
    <script src="../123/js/test.js"></script>
    <script type="text/javascript">
        /*滚动数字*/
        $('.scrollNum').numberRock({
            speed:34,
            count:197868
        });

    </script>
</body>
</html>

test.js代码如下：将此代码放到与jquery-1.11.3.js同文件夹下，最后引入到HTML中。

/*数字滚动*/
(function($){
    $.fn.numberRock=function(options){
        var defaults={
            speed:24,
            count:100
        };
        var opts=$.extend({}, defaults, options);
        var div_by = 100,
            count=opts["count"],
            speed = Math.floor(count / div_by),
            sum=0,
            $display = this,
            run_count = 1,
            int_speed = opts["speed"];
        var int = setInterval(function () {
            if (run_count <= div_by&&speed!=0) {
                $display.text(sum=speed * run_count);
                run_count++;
            } else if (sum < count) {
                $display.text(++sum);
            } else {
                clearInterval(int);
            }
        }, int_speed);
    }
})(jQuery);