[导入]DDjs发布：自然加速滑动

 

 

前两天在做一个JavaScript小游戏的时候，用到不少滑动效果，可能jQuery或者哪些库也有，但我还是自己试着写了一个通用的“自然滑动”函数，即初速为零的恒加速滑动，并且滑动的效果可以是 展开/收拢 或者 移动。

 

 

先看看实现效果：

 

 

下面先看一下函数，我会就其中的某些技术细节稍微解释一下，大家有什么不同意见可以一起讨论～

 

Code
 1 DDjs = function() {};
 2 DDjs.slide = function() {};
 3 
 4 /*
 5  * 自然加速滑动
 6  * @param
 7  * 滑动元素，滑动特性，开始数值，结束数值[，滑动时间（毫秒），刷新时间间隔（毫秒）]
 8  * 滑动特性可选值：'width' | 'height' | 'left' | 'top'
 9  * @return
  * 滑动事件句柄数组
  */
 DDjs.slide.naturalSlide = function(elem, slideWhat, startNum, endNum, time, interval) {
     var which = elem;
     var what = slideWhat;
     var diff = endNum - startNum;
     var t = time || 500;            // 时间默认值：500ms
     var itv = interval || 10;       // 刷新间隔默认值：10ms
     var handles = new Array;        // 本函数所触发的所有函数句柄
         
     for (var i = 0; i < t / itv; i++) {
         (function(){
             var step = i;
             var temp = setTimeout(function(){
                 // 设t为总时间，T为当前时刻，则T = itv * step
                 // 恒加速运动 diff = 1/2 * a * (t * t)
                 // s = 1/2 * a * (T * T) = diff / (t * t) * (itv * step) * (itv * step)
                 var s = diff * step * step * itv * itv / t / t;
                 which.style[what] = (startNum + s) + 'px';
             }, itv * step );
             handles.push(temp);
         })();
     }
     // 最后时刻位置校正
     handles.push( setTimeout(function(){
         which.style[what] =  endNum + 'px';
     }, t ));
     
     return handles;
 };

 

 

（关于函数的用法这里就不赘述了，相信在各个著名的库中都可以找到比这个优越许多的代码。）

 

 

其中涉及到三个比较重要的技巧，这里跟大家分享一下：

 

 

将自己的函数“打包”

 

首先看看1、2行，这是JavaScript一种“打包”的方式。通过这种方法，我们可以将自己写的一些库和其他引用库分割开，而不用担心函数或者变量命名重名的问题。

 

你可能会想到当我们要引用上述函数的时候有多么麻烦，我们需要书写 "DDjs.slide.naturalSlide" 这么长的一串才可以调用到这个函数。不用紧，你可以给它做“瘦身”：

slide = DDjs.slide.naturalSlide;

 

为原函数声明了一个引用，这样就可以通过这个引用（slide）调用函数了。

 

 

多态及兼容性

 

16、17行变量赋值的方式，关键在于“||”的用法。这一种方法常用于一些不确定的场合，经常用于解决浏览器兼容性问题。此处用于检测形参是否传入，如果没有传入，则使用默认值。

 

解决浏览器兼容问题的用法我在《JavaScript DOM笔记：获取及操作元素》一文中已经提到。

 

 

循环体中的闭包

 

21～31行，“闭包”的一种重要应用。首先明确一个机制：

 

“闭包范围内允许使用父函数中的变量，但提供的值并非该变量创建时的值，而是在父函数范围内的最终值。”

 

于是在for或者while等循环体中，如果出现函数闭包并且在闭包内使用了循环变量，此时的循环变量并不能取到你想要的值。于是我们必须创建另一个“非循环”的范围，并且在这个范围内捕获循环变量（上述函数中另用局部变量step进行存储），再将捕获的值传入下一个函数闭包之中。

 

 

[新闻]谷歌网页索引数量突破1万亿个
文章来源:http://www.cnblogs.com/zhengchuyu/archive/2008/07/27/1252378.html