【特效】滚动的数字

【特效】滚动的数字_第1张图片


演示地址:点我

测试代码如下:


<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);

你可能感兴趣的:(原创)