滚动鼠标达到一点范围时的跑秒效果，从0开始一直加在规定时间内加到最大值

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <meta name="Author" content="haley">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>跑秒显示效果</title>
    <style>
        .num{
            color:green;
            font-weight: bold;
            border:1px solid #f00;
            height: 80px;
            line-height: 80px;;
            font-size: 50px;
            width: 14%;
            float: left;
            text-align: center;
        }
    </style>
</head>
<body>
<div style="position: fixed;top:100px;width:100%;">
    <div class="num num1">15</div>
    <div class="num num2">34</div>
    <div class="num num3">25</div>
    <div class="num num4">32</div>
</div>
<div style="height:2000px;"></div>
<script>
    var numbers=[460,260,100,245];
    var cons=[
        {"name":$('.num1'),"n":numbers[0]},
        {"name":$('.num2'),"n":numbers[1]},
        {"name":$('.num3'),"n":numbers[2]},
        {"name":$('.num4'),"n":numbers[3]}
    ];
    var timer=null;
    var second=2000;
    function setHtml(){
        $.each(cons,function(i){
            cons[i].name.html(cons[i].n);
        });
    }
    $.fn.extend({
        'runSecond': function () {
            var elem = $(this);
            var h = elem.html()/1;
            var a = 0;
            timer = setInterval(function () {
                if (a <= h) {
                    elem.html(a++);
                } else {
//                    clearInterval(timer);
                    timer = null;
                }
            }, second / h);
            console.log(h);
        }
    });
    (function ($) {
        setHtml();
        var a= 1,arr=[];
        arr[0]=$('body').scrollTop();
        $(window).scroll(function(){
            arr[1]=$('body').scrollTop();
            console.log(arr[0]);
            console.log(arr[1]);
            if(arr[0]<arr[1]){
                console.log('向下滚动');
                arr[0]=arr[1];
            }else{
                console.log('向上滚动');
                arr[0]=arr[1];
            }
            if($('body').scrollTop()>100&&a%2){
                a++;
                $.each(cons, function (j) {
                    $(cons[j].name).runSecond();
                });
            }
            if($('body').scrollTop()<20){
                a=1;
            }
        });
    })(jQuery);

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

 

posted @ 2016-12-11 23:25  HALEY168  阅读(431)  评论(0)  编辑  收藏  举报