JavaScript 缓动效果

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_30586257

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chengyunshen/p/7193889.html

 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         }