隽永东方Imagination & Inspiration Show Time — 2017/6/19

作者: Xiaoge 所属分类: 隽永风采 // 评论数 // 参与数
发表于: 2017 年 6 月 19 日 651
标签: II Show

(1 票, 评分: 5.00 总分 5)

短链接: http://dfsj.net/eMVl6

今天进行技术分享的是 @leo 精彩分享内容如下：

首先分享了数字增长效果的JS效果代码如下：

$.fn.numberRock=function(options){                                //首先定义一个numberRock方法，默认速度24 ，最后的值为100
            var defaults={
                speed:24,
                count:100
                };
            var opts=$.extend({}, defaults, options);                 //                      Jquery的扩展方法原型是:　extend(dest,src1,src2,src3...); 这里将" {} " 作为dest参数，将defaults和options进行合并，然后将合并结果返回给opts
            var div_by = 100,                                                   //            http://www.cnblogs.com/zikai/p/5074686.html  这里有jQuery.extend函数使用详解      div_by是时间，用于计算速度
                count=opts["count"],                                         //         总数
                speed = Math.floor(count / div_by),                    //          速度            floor 返回不大于计算出来的值的最大整数 
                sum=0,                                                               //
                $display = this,
                run_count = 1,                                                       //初始值为1
                int_speed = opts["speed"];                                      //setInterval函数用到的时间间隔
            var int = setInterval(function () {                                  
                if (run_count <= div_by&&speed!=0) {                    //如果 初始值小于等于时间，且有速度
                    $display.text(sum=speed * run_count);                //即$this.text(sum=speed * run_count )      text()方法返回 sum的值，一个简单的求和，初始值一直自加，直到大于100
                    run_count++;
                } else if (sum < count) {                                            //如果总和小于你设置的count数值， 那么sum的值先自加1再通过text方法获取，否则取消int方法
                    $display.text(++sum);
                } else {
                    clearInterval(int);
                }
            }, int_speed);
        }
//以上就是numberRock方法，（ps：写了一点无用的注释）
但是对于这个函数的数字增长的原理我也没有理解自己的想法（至于原因，写的时候我应该是知道的，现在只剩上帝知道）下面我有写到一个滚动监听来实现当页面滚动到指定位置执行函数的功能

       $(function(){
            var h3_height = $(".sectionfour").offset().top;             //h3_height的值是class为sectionfour的元素到页面顶部的距离，是一个定值
            $(window).scroll(function(){                                         //滚动监听，定义this_scrollTop的值是滚动条的距离，是不断在变的值
                var this_scrollTop = $(this).scrollTop();
                if(this_scrollTop>h3_height ){                                  //如果滚动条的距离大于h3_height，即鼠标滚动到执行函数的位置，开始执行数字增长的函数。
                    $(".value").numberRock({
                        speed:34,
                        count:100000
                    })
                    $(".value2").numberRock({
                        speed:34,
                        count:98
                    })
                    $(".value3").numberRock({
                        speed:34,
                        count:77910
                    })
                }
            });
        });




上面的滚动监听对于这个数字增长功能来说有个bug，就是每次鼠标滚动到指定位置，都会执行一次，这样效果就很差，所以可以设置一个全局变量

       $(function(){
           var a = 0;                                                                                                                   // 设置全局变量
            var h3_height = $(".sectionfour").offset().top;
            $(window).scroll(function(){
                var this_scrollTop = $(this).scrollTop();
                if(this_scrollTop>h3_height && a==0 ){                                                                 //逻辑与，当滚动条的距离大于he_height并且 a为0时，执行函数，然后执行a++
                    $(".value").numberRock({                                                                                    //这样一来，函数就只执行一次，不会来回执行了
                        speed:34,
                        count:100000
                    })
                    $(".value2").numberRock({
                        speed:34,
                        count:98
                    })
                    $(".value3").numberRock({
                        speed:34,
                        count:77910
                    })
                    a++;
                }
            });
        });

$.fn.numberRock=function(options){ //首先定义一个numberRock方法，默认速度24 ，最后的值为100

var defaults={

speed:24,

count:100

};

var opts=$.extend({}, defaults, options); // Jquery的扩展方法原型是:　extend(dest,src1,src2,src3...); 这里将" {} " 作为dest参数，将defaults和options进行合并，然后将合并结果返回给opts

var div_by = 100, // http://www.cnblogs.com/zikai/p/5074686.html 这里有jQuery.extend函数使用详解 div_by是时间，用于计算速度

count=opts["count"], // 总数

speed = Math.floor(count / div_by), // 速度 floor 返回不大于计算出来的值的最大整数

sum=0, //

$display = this,

run_count = 1, //初始值为1

int_speed = opts["speed"]; //setInterval函数用到的时间间隔

var int = setInterval(function () {

if (run_count <= div_by&&speed!=0) { //如果初始值小于等于时间，且有速度

$display.text(sum=speed * run_count); //即$this.text(sum=speed * run_count ) text()方法返回 sum的值，一个简单的求和，初始值一直自加，直到大于100

run_count++;

} else if (sum < count) { //如果总和小于你设置的count数值，那么sum的值先自加1再通过text方法获取，否则取消int方法

$display.text(++sum);

} else {

clearInterval(int);

}

}, int_speed);

}

//以上就是numberRock方法，（ps：写了一点无用的注释）

但是对于这个函数的数字增长的原理我也没有理解自己的想法（至于原因，写的时候我应该是知道的，现在只剩上帝知道）下面我有写到一个滚动监听来实现当页面滚动到指定位置执行函数的功能

$(function(){

var h3_height = $(".sectionfour").offset().top; //h3_height的值是class为sectionfour的元素到页面顶部的距离，是一个定值

$(window).scroll(function(){ //滚动监听，定义this_scrollTop的值是滚动条的距离，是不断在变的值

var this_scrollTop = $(this).scrollTop();

if(this_scrollTop>h3_height ){ //如果滚动条的距离大于h3_height，即鼠标滚动到执行函数的位置，开始执行数字增长的函数。

$(".value").numberRock({

speed:34,

count:100000

})

$(".value2").numberRock({

speed:34,

count:98

})

$(".value3").numberRock({

speed:34,

count:77910

})

}

});

上面的滚动监听对于这个数字增长功能来说有个bug，就是每次鼠标滚动到指定位置，都会执行一次，这样效果就很差，所以可以设置一个全局变量

$(function(){

var a = 0; // 设置全局变量

var h3_height = $(".sectionfour").offset().top;

$(window).scroll(function(){

var this_scrollTop = $(this).scrollTop();

if(this_scrollTop>h3_height && a==0 ){ //逻辑与，当滚动条的距离大于he_height并且 a为0时，执行函数，然后执行a++

$(".value").numberRock({ //这样一来，函数就只执行一次，不会来回执行了

speed:34,

count:100000

})

$(".value2").numberRock({

speed:34,

count:98

})

$(".value3").numberRock({

speed:34,

count:77910

})

a++;

}

});

然后分享了一些很新颖的thank you page 和 404页面效果，比如：