这个其实就是以前写的图片滑动展示效果的改进版，那是我第一篇比较受关注的文章，是时候整理一下了。 有如下特色： 1，有四种方向模式选择； 2，结合tween算法实现多种滑动效果； 3，能自动根据滑动元素计算展示尺寸； 4，也可自定义展示或收缩尺寸； 5，可扩展自动切换功能； 6，可扩展滑动提示功能。 兼容：ie6/7/8, firefox 3.6.8, opera 10.51, safari 4.0.5, chrome 5.0 程序说明 【基本原理】 通过设置滑动元素的位置坐标(left/right/top/bottom)，实现鼠标进入的目标元素滑动展示，其他元素滑动收缩的效果。 难点是如何控制多个滑动元素同时进行不同的滑动，这里关键就在于把整体滑动分解成各个滑动元素进行各自的滑动。 方法是给各个滑动元素设置目标值，然后各自向自己的目标值滑动，当全部都到达目标值就完成了。 【容器设置】 在_initContainer方法中进行容器设置，由于后面滑动参数的计算要用到容器，所以要先设置容器。 先设置容器样式，要实现滑动需要设置容器相对或绝对定位，并且设置overflow为"hidden"来固定容器大小，而滑动元素也要设置绝对定位。 鼠标移出容器时会触发_LEAVE移出函数： $$E.addEvent( container, "mouseleave", this._LEAVE ); 其中_LEAVE函数是这样的： 代码 var CLOSE = $$F.bind( this.close, this ); this._LEAVE = $$F.bind( function(){ clearTimeout(this._timerDelay); $$CE.fireEvent( this, "leave" ); if ( this.autoClose ) { this._timerDelay = setTimeout( CLOSE, this.delay ); } }, this ); 当autoClose属性为true时才会延时触发close方法。 【滑动对象】 程序初始化时会根据滑动元素创建滑动对象集合。 先获取滑动元素： var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } ) : $$A.filter( container.childNodes, function(n) { return n.nodeType == 1; }); 如果没有自定义nodes滑动元素，就从容器获取childNodes作为滑动元素。 还要用nodeType筛选一下，因为ie外的浏览器都会把空格作为childNodes的一部分。 接着用获取的滑动元素生成程序需要的_nodes滑动对象集合： this._nodes = $$A.map( nodes, function(node){ return { "node": node }; }); 滑动对象用"node"属性记录滑动元素。 然后在_initNodes方法中初始化滑动对象。 每个滑动对象都有3个用来计算滑动目标值的属性：defaultTarget默认目标值，max展示尺寸，min收缩尺寸。 如果有自定义max尺寸或min尺寸，会根据自定义的尺寸来计算。 程序会优先按max来计算： max = Math.max( max <= 1 ? max * clientSize : Math.min( max, clientSize ), defaultSize ); min = ( clientSize - max ) / maxIndex; 其中clientSize是容器的可见区域尺寸，defaultSize是平均分配尺寸。 如果max是小数或1就按百分比计算，再把尺寸限制在defaultSize到clientSize的范围内。 再计算减去max后其他收缩元素的平均尺寸，就可以得到min了。 如果没有自定义max再按自定义min来计算： min = Math.min( min < 1 ? min * clientSize : min, defaultSize ); max = clientSize - maxIndex * min; 同样，如果min是小数就按百分比计算，再做范围限制，然后计算得出max。 最后得到自定义尺寸计算函数： getMax = function(){ return max; }; getMin = function(){ return min; }; 如果没有自定义max或min，就根据元素尺寸来计算： getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); }; getMin = function(o){ return ( clientSize - o.max ) / maxIndex; }; 把元素尺寸作为展示尺寸来计算，同样要做范围限制，然后计算收缩尺寸。 得到尺寸计算函数后，再用_each方法历遍并设置滑动对象： o.current = o.defaultTarget = getDefaultTarget(i); o.max = getMax(o); o.min = getMin(o); 其中current是当前坐标值，在移动计算时作为开始值的。 而defaultTarget是默认目标值，即默认状态时移动的目标值，根据defaultSize和索引得到。 还要设置当鼠标进入滑动元素时触发show展示函数： 代码 var node = o.node, SHOW = $$F.bind( this.show, this, i ); o.SHOW = $$F.bind( function(){ clearTimeout(this._timerDelay); this._timerDelay = setTimeout( SHOW, this.delay ); $$CE.fireEvent( this, "enter", i ); }, this ); $$E.addEvent( node, "mouseenter", o.SHOW ); 要在滑动元素的"mouseenter"事件中触发，并传递当前滑动对象的索引，再加上延时设置就可以了。 【滑动展示】 当鼠标进入其中一个滑动元素，就会触发show方法开始展示。 首先执行_setMove方法设置滑动参数，并以索引作为参数。 在_setMove里面主要是设置计算移动值时需要的目标值、开始值和变化值。 先修正索引，错误的索引值会设置为0： this._index = index = index < 0 || index > maxIndex ? 0 : index | 0; 再根据索引获取要展示的滑动对象，通过展示对象的min和max得到getTarget目标值函数： var nodeShow = nodes[ index ], min = nodeShow.min, max = nodeShow.max; getTarget = function(o, i){ return i <= index ? min * i : min * ( i - 1 ) + max; }; 如果滑动对象就是展示对象或者在展示对象前面，目标值就是min * i，因为第i+1个滑动对象的目标值就是i个min的大小。 否则，目标值就是min * ( i - 1 ) + max，其实就是把展示对象的位置换成max。 然后设置每个滑动对象的参数属性： this._each( function(o, i){ o.target = getTarget(o, i); o.begin = o.current; o.change = o.target - o.begin; }); 其中target记录目标值，begin通过current得到开始值，目标值和开始值的差就是change改变值。 设置完成后，就执行_easeMove方法开始滑移，在里面重置_time属性为0，再就执行_move程序就正式开始移动了。 首先判断_time是否到达duration持续时间，没有到达的话，就继续移动。 程序设置了一个_tweenMove移动函数，用来设置缓动： this._setPos( function(o) { return this.tween( this._time, o.begin, o.change, this.duration ); }); 利用tween算法，结合当前时间，开始值，改变值和持续时间，就能得到当前要移动的坐标值。 ps：关于tween缓动可以参考tween算法及缓动效果。 当_time到达duration说明滑动已经完成，再执行一次_targetMove目标值移动函数： this._setPos( function(o) { return o.target; } ); 直接移动到目标值，可以防止可能出现的计算误差导致移位不准确。 【关闭和重置】 close方法可以关闭展示，即滑动到默认状态，默认在移出容器时就会执行。 默认状态是指全部滑动元素位于defaultTarget默认目标值的状态。 先用_setMove设置移动参数，当_setMove没有索引参数时，就会设置目标值为默认目标值： getTarget = function(o){ return o.defaultTarget; } 完成参数设置后，再执行_easeMove进行滑动，跟滑动展示类似。 reset方法可以重置展示，重置的意思是不进行滑动而直接移动到目标值。 如果没有索引参数，就会直接执行_defaultMove默认值移动函数： this._setPos( function(o) { return o.defaultTarget; } ); 直接把滑动元素移动到默认状态。 如果有索引参数，就先用_setMove根据索引设置目标值，再执行_targetMove直接移动到目标值。 程序初始化后会执行一次reset，并且以自定义defaultIndex作为参数。 利用defaultIndex可以一开始就展示对应索引的滑动对象。 【方向模式】 程序可以自定义mode方向模式，有四种方向模式：bottom、top、right、left(默认)。 其中right和left是在水平方向滑动，而bottom和top是在垂直方向滑动。 而right和left的区别是定点方向不同，left以左边为定点在右边滑动，right就相反。 具体参考实例就应该明白了，bottom和top的区别也类似。 程序是通过对不同的方向就修改对应方向的坐标样式来实现的。 例如left模式就用"left"样式来做移动效果，top模式就用"top"样式。 初始化程序中设置的_pos属性就是用来记录当前模式要使用的坐标样式的： this._pos = /^(bottom|top|right|left)$/.test( opt.mode.toLowerCase() ) ? RegExp.$1 : "left"; 然后在_setPos方法中使用_pos指定的坐标样式来设置坐标值： var pos = this._pos; this._each( function(o, i) { o.node.style[ pos ] = (o.current = Math.round(method.call( this, o ))) + "px"; }); 而_horizontal属性就记录了是否水平方向滑动，即是否right或left。 在计算尺寸时，通过它来指定使用用水平还是垂直方向的尺寸。 还有一个_reverse属性，判断是否bottom或right模式。