SlideView 图片滑动(扩展/收缩)展示效果
2024-05-06 14:27:53
供稿：网友
这个其实就是以前写的图片滑动展示效果的改进版，那是我第一篇比较受关注的文章，是时候整理一下了。
有如下特色：
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是平均分配尺寸。
