随着页面滚动，数字自动增大的jquery特效

首先为了截出gif图，我下载了一个小工具

主要就是依赖这个脚本script.js

// JavaScript Document
$.fn.countTo = function (options) {
        options = options || {};
        
        return $(this).each( () {
             set options for current element
            var settings = $.extend({},$.fn.countTo.defaults,{
                from:            $(this).data('from'),to:              $(this).data('to'this).data('speed'this).data('refresh-interval'this).data('decimals')
            },options);
            
             how many times to update the value,and how much to increment the value on each update
            var loops = Math.ceil(settings.speed / settings.refreshInterval),increment = (settings.to - settings.from) / loops;
            
             references & variables that will change with each update
            var self = this,$self = $(= settings.from,data = $self.data('countTo') || {};
            
            $self.data('countTo' if an existing interval can be found,clear it first
            if (data.interval) {
                clearInterval(data.interval);
            }
            data.interval = setInterval(updateTimer,settings.refreshInterval);
            
             initialize the element with the starting value
            render(value);
            
             updateTimer() {
                value += increment;
                loopCount++;
                
                render(value);
                
                if (typeof(settings.onUpdate) == 'function') {
                    settings.onUpdate.call(self,value);
                }
                
                if (loopCount >= loops) {
                     remove the interval
                    $self.removeData('countTo');
                    clearInterval(data.interval);
                    value = settings.to;
                    
                    typeof(settings.onComplete) == 'function') {
                        settings.onComplete.call(self,value);
                    }
                }
            }
            
             render(value) {
                var formattedValue = settings.formatter.call(self,value,settings);
                $self.html(formattedValue);
            }
        });
    };
    
    $.fn.countTo.defaults = {
        from: 0, the number the element should start at
        to: 0,1)"> the number the element should end at
        speed: 1000,1)"> how long it should take to count between the target numbers
        refreshInterval: 100,1)"> how often the element should be updated
        decimals: 0,1)"> the number of decimal places to show
        formatter: formatter,1)"> handler for formatting the value before rendering
        onUpdate: null,1)"> callback method for every time the element is updated
        onComplete: null        callback method for when the element finishes updating
    };
    
     formatter(value,settings) {
        return value.toFixed(settings.decimals);
    }



   custom formatting example
  $('#count-number').data('countToOptions' (value,options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g,',');
    }
  });
  
 count1(options) {
 document.getElementById('dt').style.display = "block"; 鎺у埗鐩掑瓙鏄剧ず
}
 
   count(options) {
    var $this = $();
    options = $.extend({},options || {},$this.data('countToOptions') || {});
    $.countTo(options);
  }

使用时首先在页面引入jquery.js和script.js

给要动画的元素添加 timer 类，data-to 表示最终到达的数字， data-speed 表示动画速度

<h2 class="timer" data-to="1000" data-speed="4000">1000</h2>

调用时的脚本

<script type="text/javascript">
    $('.timer').each(count) 
    $('.timer').each(count1);
</script>

接下来是完整的页面

<!doctype html>
htmlheadMeta charset="utf-8"title>demoscript type="text/javascript" src="js/jquery.js"></script="js/script.js">

body="text/javascript">
    $('.timer).each(count) 
    $().each(count1);
>

当然我这个比较丑，找了个好看的demo

style
@charset "utf-8";
/* CSS Document */
时间人数开始*/
.time{ width:100%; height298px floatleft backgroundurl(images/timebg.png) no-repeat center background-sizecover}
.time_content1200px margin0 auto
.time_left40% max-width480px
.time_left h124px line-height font-size22px text-aligncenter color#FFF font-weight400 margin-top96px
.time_left h256px54px12pxbold

.time_right60%720px
.wrapper  630px90px margin-left100px110px displaynone
.wrapper1200px
.wrapper220px border-right1px solid #FFF border-left
.wrapper3

.counter #ffe400 border-radius 5px
.time1
.time1 h1
.time1 h2
.time270px50px
.time3margin-left40px
.timex30pxcolor
.timey
.wrapper2 .timey148px52px
.wrapper3 .timey152px48px
.count-title  normal center; 
.count-text  13px  margin-top 10px margin-bottom 0}
时间人数结束*/
div ="time">
    ="time_content">
        ="time_left">
            h1>真实数据&nbsp;放心选择>专注学历教育15年div="time_right"="wrapper" id="dt">
            
                ="wrapper1">
                    ="counter col_fourth time1">
                      ="timer count-title"="300000"="2000">300000="timex">以上="timey">付费学员>
                 >
                 
                 ="wrapper2"="counter col_fourth time2"="107">107>家>地区分部="wrapper3"="counter col_fourth time3">多人>教研团队>
            
            
                 $().each(count) 
                 $().each(count1);
            >
            
        >

效果图

随着页面滚动，数字自动增大的jquery特效

猜你在找的jQuery相关文章