SlideView 图片滑动（扩张/收缩）展示效果

SlideView 图片滑动（扩展/收缩）展示效果

滑动展示效果主要用在图片或信息的滑动展示，也可以设置一下做成简单的口风琴（Accordion）效果。
这个其实就是以前写的图片滑动展示效果的改进版，那是我第一篇比较受关注的文章，是时候整理一下了。
有如下特色：
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移出函数：

当autoClose属性为true时才会延时触发close方法。

【滑动对象】
程序初始化时会根据滑动元素创建滑动对象集合。
先获取滑动元素：

有两种方法，可以调整元素插入顺序：
如果自定义了tipTag，就会根据标签来获取元素，否则就按默认值"*"获取全部元素。
如果自定义了tipClass，就会再根据className来筛选元素，注意可能包含多个样式，不能直接等于。
得到函数后，再创建提示对象：
?可选参数用来设置系统的默认属性，包括：
属性:??? 默认值//说明
nodes:???null,//自定义展示元素集合
mode:???"left",//方向
max:???0,//展示尺寸(像素或百分比)
min:???0,//收缩尺寸(像素或百分比)
delay:???100,//触发延时
interval:??20,//滑动间隔
duration:??20,//滑动持续时间
defaultIndex:?null,//默认展示索引
autoClose:??true,//是否自动恢复
tween:???function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; },//tween算子
onShow:???function(index){},//滑动展示时执行
onClose:??function(){}//滑动关闭执行
其中interval、delay、duration、tween、autoClose、onShow、onClose属性可以在程序初始化后动态设置。
还提供了以下方法：
show：根据索引滑动展示；
close：滑动到默认状态；
reset：重置为默认状态或展开索引对应滑动对象；
dispose：销毁程序。
要使用自动展示，只要在SlideView后面加入自动展示扩展程序，并且auto参数设为true即可。
新增如下可选参数：
autoDelay:?2000//展示时间
要使用提示信息，只要加入提示信息扩展程序，并且tip参数设为true即可。
新增如下可选参数：
属性:??? 默认值//说明
tipPos:??"bottom",//提示位置
tipTag:??"*",//提示元素标签
tipClass:?"",//提示元素样式
tipShow:?null,//展示时目标坐标
tipClose:?null//关闭时目标坐标