JavaScript 缓动效果 

 1  Math.easeout = function (A, B, rate, callback) {
 2             if (A == B || typeof A != 'number') {
 3                 return;    
 4             }
 5             B = B || 0;
 6             rate = rate || 2;
 7             
 8             var step = function () {
 9                 A = A + (B - A) / rate;
10                 
11                 if (A < 1) {
12                     callback(B, true);
13                     return;
14                 }
15                 callback(A, false);
16                 setTimeout(step,100);    
17             };
18             step();
19         };
20     /*
21     其中：        
22         A是起始位置；
23         B是目标位置；
24         rate是缓动速率；
25         callback是变化的位置回调，支持两个参数，value和isEnding，表示当前的位置值（数值）以及是否动画结束了（布尔值）；
26         于是，我们的返回顶部效果可以这么使用：
27     */
28         var doc = document.body.scrollTop? document.body : document.getElementById("box-2");
29         doc.onclick = function(){
30         Math.easeout(doc.scrollTop, 0, 4, function (value) {
31             doc.scrollTop = value;
32         });
33         }

 

posted @ 2017-07-17 13:48  橙云生  阅读(163)  评论(0)    收藏  举报