博客园_cloudgamer

AlertBox 弹出层（信息提示框）效果

2010-10-11T02:08:00Z

弹出层（弹窗）就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。
在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。
此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0

效果预览

AlertBox

右下角消息框

关闭

点击拖动

程序说明

【实现原理】

弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位，一般相对文档的定位用absolute就行了。
要随屏移动，即相对窗口定位，就用fixed定位。
这些实现起来都很简单，除了不支持fixed的ie6。

【兼容ie6的fixed】

由于ie6本身不支持fixed定位，只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置。
后来有人发现还可以通过reflow“离奇”地实现。
但以上方法都有一个缺陷，滚动时弹出层会“发抖”，很不舒服（可以用缓动等来改善）。

想要不发抖，可以通过html和css的巧妙应用来实现，具体参考14px的介绍。
原理是用一个容器代替body，然后对不会动的body绝对定位。
看来很完美，但有一个致命的问题，这个方法需要修改html结构，会影响到相关的一些东西，例如window的scroll事件等。

程序中用了另一个方法，通过body的背景和expression来实现，下面是一个兼容的fixed效果：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    _background: url(about:blank) fixed;
}
.fixable {
    position:fixed;
    top:100px;
    _position:absolute;
    _top:expression((document).documentElement.scrollTop+100);
}
</style>
</head>
<body style="height:1500px;">
<div class="fixable">fixable</div>
</body>
</html>

相比前面的方法，这个是比较完美的了，但也有一些问题，例如body的背景只能用fixed，使用expression资源消耗相对较大。
更大的问题是不能实现用百分比值或right/bottom来定位。
为了解决这个问题，程序使用了一个定位层，这个层用上面的方法实现fixed定位，尺寸跟窗口大小一样，并且位置重合，那么只要用一般的定位方法相对这个层定位，就能达到相对窗口定位的效果了。

兼容程序主要在RepairFixed对象中，首先设置body背景：

if (body.currentStyle.backgroundAttachment !== "fixed") {
    if (body.currentStyle.backgroundImage === "none") {
        body.runtimeStyle.backgroundRepeat = "no-repeat";
        body.runtimeStyle.backgroundImage = "url(about:blank)";
    }
    body.runtimeStyle.backgroundAttachment = "fixed";
}

再创建定位层：

layer = document.createElement("<div style='position:absolute;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:block;'>");

定位层还要设置"overflow:hidden"，好处是不会因弹出层在document原来的范围外而自动扩大document。
ie6测试以下代码，document会随着下滚而不断扩大：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    _background: url(about:blank) fixed;
}
.fixable {
    position:absolute;
    top:expression((document).documentElement.scrollTop+(document).documentElement.clientHeight);
}
</style>
</head>
<body>
<div class="fixable">fixable</div>
</body>
</html>

加上"overflow:hidden"就可以防止这种情况。

然后弹出层通过append方法修改为"absolute"定位，并插入到这个定位层，这样就能实现fixed效果了。

由于这个定位层比较耗资源，所以在有元素插入时才会插到body中。
在不需要fixed的时候，要用remove方法从定位层中移除，当定位层内没有需要定位元素就会自动从body移除。
ps：隐藏的话expression还会继续执行，要移出文档才行。

【居中效果】

加入居中扩展程序，并且设置center为true，就会自动相对窗口居中。
居中的原理跟仿Lightbox效果是一样的，通过设置负的元素尺寸一半的margin和"50%"的top/left来居中。
要注意的是不是使用fixed定位时，计算需要加上scrollTop/scrollLeft。

【覆盖层】

在仿Lightbox效果中，ie6的覆盖层是通过创建一个覆盖整个页面的层来做的。
使用新的兼容fixed方法后，就不用另外做兼容，按照fixed的效果做就行了。
覆盖层是由AlertBox扩展而来，它其实就是一个大小跟窗口一样，并且跟窗口重合的弹出层。
由于覆盖层一般只需要定义一个就行了，这里把它做成一个OverLay对象，使用时直接调用它的show和close方法。

【遮盖select】

在仿Lightbox效果中介绍过两种遮盖select的方法：隐藏和iframe。
程序是通过iframe来遮盖的，放在ie6的兼容扩展程序中。
在iframe定位时要注意，要定位到弹出层的负的clientTop/clientLeft，这样才能保证边框不会被遮住。

使用技巧

【定位】

除了居中，程序会按照弹出层本身的定位样式来显示。
不是fixed定位时要注意，在ie6是相对当前窗口来定位的，其他都是相对第一屏窗口来定位的。
还要注意，必须声明DOCTYPE，才能正确定位。
程序为了尽量通用，降低了效率（用了4个expression），所以最好还是根据实际情况自己来调整。
ps：需要像定位提示效果那样预设定位的话，可以自行扩展。

【锁定键盘】

使用覆盖层时，为了防止用户通过键盘操作页面，可以在document的keydown中执行preventDefault来禁用。
如果弹出层需要正常操作，只要在弹出层的keydown中执行stopPropagation就行了。

【拖动弹窗】

这里只是简单的加上拖动功能，要注意的是fixed定位时，计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。

【遮盖flash】

有时显示出即使设置了zIndex也会被flash遮住，只要给flash添加一个wmode属性设置其值为transparent，即把flash设置透明就行了。

使用说明

实例化时，必须有弹出层作为参数：

new AlertBox("idBox");

可选参数用来设置程序的默认属性，包括：
属性:   默认值//说明
fixed:  false,//是否固定定位
zIndex:  1000,//层叠数
onShow:  $$.emptyFunction,//显示时执行
onClose: $$.emptyFunction//关闭时执行

还提供了以下方法：
show：显示弹出层；
close：隐藏弹出层；
dispose：销毁程序。

加入兼容ie6扩展程序后，会自动修正ie6的fixed问题，可根据fixSelect属性设置是否修正select遮盖bug，默认是。
加入居中扩展程序后，可根据center属性设置是否居中，默认否。

RepairFixed修正fixed对象，可独立使用，有append和remove方法添加和移除需要fixed的元素，只能在ie6使用。
OverLay覆盖层对象，有如下属性：
属性: 默认值//说明
"color": "#fff",//背景色
"opacity": .5,//透明度(0-1)
"zIndex": 100,//层叠值
还有show和close方法显示和隐藏覆盖层。

完整实例下载

本文链接

JavaScript 图片3D展示空间（3DRoom）

2010-09-20T00:48:00Z

一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。
程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。
很久以前就看过一个3DRoom效果，是用复杂的计算实现的。
在上一篇图片变换研究过css3的transform之后，就想到一个更简单的方法来实现。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
中秋将至，预祝各位中秋快乐，团团圆圆！

效果预览

3DRoom

程序说明

【实现原理】

3D效果的关键，是深度的实现。
把3D容器看成一个由多个不同深度的层组成的空间，这些层的尺寸默认跟容器一样。
层里面放了该深度的图片，并且各个层会根据深度的变化做缩放变换，从视觉上产生深度差。
缩放变换的比例按照最近点为1，最远点为0，逐渐变化。
关键的地方是层里面图片的尺寸和坐标必须跟着层同时变换，这个通过css3的transform很简单就能实现。
这样图片只需设置好尺寸再相对层定好位就行了，避免了随深度变化要不断调整图片尺寸和定位的麻烦。

【图片加载】

在程序初始化之后，就可以调用add方法来添加图片。
add方法有两个参数：图片地址和参数对象，还会返回一个图片操作对象。
操作对象包含以下属性和方法，方便对图片进行操作：
img: 图片元素
src: 图片地址
options: 参数对象
show: 显示图片方法
remove: 移除图片方法
其中options可以设置如下属性：
属性:    默认值//说明
x:  0,//水平位移
y:  0,//垂直位移
z:  0,//深度
width: 0,//宽度
height: 0,//高度
scaleW: 1,//宽度缩放比例
scaleH: 1//高度缩放比例
其中x、y分别是水平和垂直坐标的位移参数，坐标原点在容器底部中间，水平坐标向右，纵坐标向上，单位是px。
而z是深度，用于比例的计算，方向由近点到原点。
坐标系如下图：

图片加载成功后，就会执行_load图片加载程序。
首先根据参数设置图片样式：

img.style.cssText = "position:absolute;border:0;padding:0;margin:0;-ms-interpolation-mode:nearest-neighbor;"
    + "z-index:" + (99999 - z) + ";width:" + width + "px;height:" + height + "px;"
    + "left:" + (((clientWidth - width) / 2 + opt.x) / clientWidth * 100).toFixed(5) + "%;"
    + "top:" + ((clientHeight - height - opt.y) / clientHeight * 100).toFixed(5) + "%;";

绝对定位是必须的，宽度和高度根据参数设置就行。
left和top根据坐标参数计算，这里需要用百分比的形式表示，后面再详细说明。
还要给图片增加一个_z属性记录深度，方便调用。
最后插入对应z的层，并重新显示该层。

【层变换】

图片加载后，会用_insertLayer程序把图片插入到对应的层中。
_insertLayer有两个参数：图片元素和z深度。
程序用_layers对象，以z为关键字记录对应的层元素。
如果在该深度还没有创建层，会自动创建一个：

layer = document.createElement("div");
layer.style.cssText = "position:absolute;border:0;padding:0;margin:0;left:0;top:0;visibility:hidden;background:transparent;width:" + this._clientWidth + "px;height:" + this._clientHeight + "px;";

层的坐标和尺寸要跟容器一致，因为插入图片的坐标是相对容器来定义的，这样使用起来比较方便。
还会添加一个_count属性，记录层包含的图片数，最后插入到容器并记录到_layers对象中。
获取层对象后，就把图片插入层中，并把_count计数加1。

接着就可以通过_showLayer程序根据深度显示对应的层。
程序包含三个坐标属性：_x、_y、_z，表示容器的三维坐标的偏移量。
首先通过_getScale获取比例方法得到z深度的缩放比例scale。
比例大于1，说明图片在视觉深度的后面，理论上应该看不到，所以隐藏；小于0，就是小到看不到了也隐藏。

而_x和_y偏移量也需要根据深度来重新计算，程序有两种偏移方式：远点固定和近点固定。
远点固定的意思是平面位移偏移量随着深度逐渐变小，产生以最远点为固定点移动方向的效果，近点固定就刚好相反。
要实现这个效果，只要位移偏移量也跟着比例变化就行了，即远点固定时偏移量跟比例成正比，远点固定时是反比：

var moveScale = this.fixedFar ? scale : (1 - scale);

然后把这些参数交给_show程序来处理，并显示效果。

为了最大限度地利用层元素，程序会在_remove图片移除程序中，把没有图片的层放到_invalid废弃层集合中，在需要插入层时，优先从_invalid中获取。

【缩放比例】

上面已经说了，缩放比例应该按照最近点为1，最远点为0，逐渐变化。
程序默认是通过下面的公式计算：

function(z){ return 1 - z / 1000; }

但用这个公式实现3DRoom效果的时候，会发现比例变化太急速，并不像这个3DRoom那样平稳。

研究代码后发现，原来它用的公式是这样的：

this.r = FL / (FL + (z * Z));

其中FL和Z是一个常量来的，即公式可表示成：

function(z){ return 1/(1+z/常量); }

那按照这个公式，深度为0时比例为1，深度为常量时比例为0.5，深度为无穷大时比例为0。

变化效果可以参考下面程序：

公式：

可以看出，缩放比例在默认公式是均匀变化的，而3DRoom公式是先快后慢，而且是逐渐变慢，所以有那种平稳的感觉。
那按照实际，还可以自己设计适合的公式，只要符合在1到0之间变化就行。

【css3模式】

程序中有三种缩放变换方式：css3、zoom和base，模式的程序结构跟上一篇类似。
缩放变换的目的是根据传递过来的比例和位置偏移量，把缩放效果显示出来，实现最终的3D效果。

css3模式使用的是css3的transform，在上一篇已经介绍过用transform的matrix做缩放和旋转，这次还需要后面两个参数做位置变换。
后面两个参数要注意单位的设置，在MDC的-moz-transform有说明：
Gecko (Firefox) accepts a <length> value for tx and ty.
Safari (WebKit) and Opera currently support a unitless <number> for tx and ty.
意思是位移参数tx和ty，在Firefox需要带单位，而WebKit和Opera只需要数字（不带单位，默认px）。
程序会根据浏览器设置单位。

使用css3模式，还可以通过修改_r弧度属性进行旋转。
最后设置matrix实现变换：

layer.style[ css3Transform ] = "matrix("
    + ( Cos * scale).toFixed(5) + "," + (Sin * scale).toFixed(5) + ","
    + (-Sin * scale).toFixed(5) + "," + (Cos * scale).toFixed(5) + ", "
    + Math.round(x) + unit + ", " + Math.round(y) + unit + ")";

这里还要注意一个问题，计算得到的比例可能是一个很长的小数，在拼字符时会出问题。
例如执行：alert(0.0000001)，会得到“1e-7”，js会用这个结果来拼字符，得到错误的结果。
所以在做数字和字符的拼接时，能用整数的应该先转成整数，小数的话也要用toFixed转换一下。

【zoom模式】

ie还不支持transform，但有一个zoom样式能实现类似的效果。
由于zoom后，尺寸会发生变化，所以需要修正left和top移动到正确的位置。

除了ie，webkit(chrome/safari)也支持zoom，不过ie6/7、ie8和webkit的实现并不完全相同。
测试以下代码：

在ie6/7实现了想要的效果，但在webkit显示的位置错了。
原因是使用zoom后，元素的left和top也会随着缩放，那只要按比例重新计算就行。
像上面的例子，只要把left和top改成50/0.5，即100就正确了。

ie8就更麻烦，里面的内容是按zoom缩放了，但left和top还是原来的大小。
被这个问题困扰了很久，最后发现通过用百分比定位就可以解决，在图片加载时left和top要用百分比就是这个原因。
例如在例子中，修正left和top，并把最里面的div的left改成25%就可以了。
在ie8还看到一个问题，在zoom后，内容是缩小了，容器和内部元素的尺寸却没有变化，还好这不会影响到图片的显示，定位也要用left和top，免得麻烦。
还有，如果zoom的元素的尺寸用百分比设置，那元素的尺寸就不会根据zoom缩放了。

在计算时还要注意一个问题，上面提到在webkit和ie8，left和top都需要除以scale来修正，当scale接近0到一定程度，结果会变成Infinity(无穷大)。
用Infinity进行运算会出错，需要修正这个问题：

left = Math.min(MAX, Math.max( -MAX, left )) | 0;
top = Math.min(MAX, Math.max( -MAX, top )) | 0;

其中MAX是Number.MAX_VALUE(js能表达的最大数)。

【base模式】

还有兼容全部浏览器的base模式，用的是传统的方法，即根据缩放比例，计算并设置每个图片的尺寸和位置。
每次显示时，历遍层里面的图片，再逐个计算设置。
计算需要图片的原始位置和尺寸，在第一次计算时会把数据保存在_original属性中：

var original = img._original = img._original || {
width: img.offsetWidth, height: img.offsetHeight,
left: img.offsetLeft, top: img.offsetTop
};

尺寸只要根据比例缩放就行，位置除了计算相对层的缩放还要加上相对容器的位移，这个跟zoom模式的计算是一样的。
理解了层变换的方式后，再理解这个就不难了。

【zIndex】

深度除了要缩放和定位，还需要合理的前后遮盖。
前后遮盖需要用zIndex来实现，可以在图片或层上设置。
首先最简单的方法是在层上设置：

实现一般的3D效果可以这样设置。
但点击测试，在ff和webkit前面的能触发后面的不能触发，而ie和opera就前后都可以触发。
ps：如果img换成div，那么ie和opera后面的元素也不能触发，原因还不清楚。
这样要想像3DRoom那样触发图片事件的话就不能在层设置zIndex。

还可以在图片上设置：

这样图片在所有浏览器都能正常触发，但在ie6/7层叠的效果失效了,看来在ie6/7只能在层用zIndex。
还有一个问题，如果给div加上变换效果：

div{-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);}

那图片上的zIndex就会失效，那css3模式就只能在层设置zIndex了。

总结一下：
在css3模式肯定要在层设置zIndex，但图片也不能触发事件。
在zoom和base模式，应该在图片设置zIndex，但在ie6/7就要在层设置。
这样至少在base模式层叠和图片触发事件都是正常的。

【msInterpolationMode】

开始做的时候，效果在ie8下会很卡，但这个3DRoom却不会卡，最后发现是使用了-ms-interpolation-mode。
这个东西在aoao的文章中看过，但没想到可以用在这里。

在MSDN有msInterpolationMode的介绍：
Gets or sets the interpolation (resampling) method used to stretch images.
即获取或设置用于拉伸图像的插值（重采样）方法。
它有两个值：
nearest-neighbor：使用近邻插值模式。
bicubic：使用高品质的双三次插值模式。
这些名词比较专业，我们只要知道使用nearest-neighbor效率高但效果差，而bicubic效果好效率低就够了。
程序把它设为nearest-neighbor提高效率，这样在ie8中也不会卡了。

【拖动方向变换/滚轮深度变换】

程序扩展了拖动视觉变换和滚轮深度变换。
拖动和滚动的做法跟上一个的做法差不多，这里拖动是实现方向的变换，滚轮是实现深度的变换。
移动是通过修改_x和_y属性来实现，缩放是通过修改_z来实现。
修改属性之后再调用show方法显示效果。

使用技巧

【3DRoom】

在3DRoom效果中，因为要实现图片的触发事件，所以不能用css3模式，原因是上面提到的层叠问题。
上面也提到在ie8被zoom的元素尺寸不会改变，导致触发范围错误，所以也不用zoom模式。
使用base模式就不会有问题了。

在点击图片时，视觉会移动到图片上面，这个通过点击图片后根据本身的三维参数修改_x/_y/_z来实现：

img.onclick = function(){
    i3D._z = -options.z | 0;
    i3D._x = -options.x | 0;
    i3D._y = options.y | 0;
    i3D.show();
}

图片在mouseover时会显示一个边框，为了让图片加边框后不发生位移，加了一个"-1px"的margin，mouseout时再去掉。
这里3DRoom跟参考的效果还是有差距，本文主要还是对3D效果的实现和研究。

【模式选择】

css3模式稳定，大部分浏览器都支持，除了ie。
zoom模式兼容性不好，但ie支持。
base最慢，但兼容性好，而且没有bug。
一般情况下应优先使用css3模式，然后是zoom，最后base，但像3DRoom那样的情况就要按实际选择了。
设计的时候，ie是打算用Matrix滤镜的，但开发中发现一些问题，效率又太低，就不考虑了。

使用说明

实例化时，必须有容器作为参数：

var i3D = new Image3D( container, options );

然后调用i3D方法添加图片：

i3D.add( src, options );

可选参数用来设置系统的默认属性，包括：
属性:   默认值//说明
mode:  "css3|zoom|base",//模式
x:   0,//水平偏移值
y:   0,//垂直偏移值
z:   0,//深度偏移值
r:   0,//旋转角度(css3支持)
fixedFar: false,//是否远点固定
getScale: function(z){ return 1 - z / 1000; },//获取比例方法
onError: function(err){}//出错时执行

add方法的可选参数在图片加载中已经说明。

还提供了以下方法：
add：添加图片；
show：显示效果；
reset：重置默认状态；
dispose：销毁程序。

加入拖动方向变换或滚轮深度变换扩展后，可通过设置相关参数定义变换范围。

完整实例下载

本文链接

图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)

2010-08-16T01:09:00Z

以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。
css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。
css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。
本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作图片查看器。
有如下特色：
1，用滤镜、ccs3和canvas实现相同的变换效果；
2，可任意角度旋转；
3，可任意角度翻转；
4，可扩展滚轮缩放；
5，可扩展拖动旋转。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0

效果预览

程序说明

【基本原理】

变换主要是利用css3的变换样式transform的matrix方法来实现。
ie不支持css3，但有Matrix滤镜也能实现类似的效果。
程序还用canvas，通过画图实现相同的效果。

【模式设置】

程序包含三种模式：css3、filter和canvas，程序初始化时，会根据自定义模式进行模式设置。
各个模式相关的属性和方法都存放在ImageTrans.modes中。
每个模式对象都包含support属性，表示当前浏览器是否支持该模式，还有几个方法：
init：初始化执行程序
load：加载图片执行程序
show：变换显示程序
dispose：销毁程序

使用这样的格式来自定义模式："css3|filter|canvas"，判断过程主要在_initMode程序中：

var modes = ImageTrans.modes;
this._support = $$A.some( this.options.mode.toLowerCase().split("|"), function(mode){
    mode = modes[ mode ];
    if ( mode && mode.support ) {
        ...
        return true;
    }
}, this );

程序会按顺序逐个判断，当浏览器支持该模式时就会用该模式的方法设置程序函数。
再用_support记录浏览器是否支持指定的模式。

如果浏览器支持，才执行_initContainer容器初始化程序和_init模式初始化程序。

【加载图片】

完成初始化设置后，再执行load方法加载图片。
在load方法中，主要对图片进行设置：

img.onload || ( img.onload = this._LOAD );
img.onerror || ( img.onerror = function(){ oThis.onError("err image"); } );

最后设置src加载图片。

图片加载成功后，会执行_LOAD程序，在里面会执行_load加载程序和reset方法。
在reset中，会重置变换参数，并执行_show模式画图程序：

this._y = this._x = 1; this._radian = 0;
this._show();

这时，图片会以初始状态显示。

【图片变换】

图片加载完成后，就可以对图片进行变换。

各种变换方法保存在ImageTrans.transforms中，包括旋转、垂直翻转、水平翻转、缩放等。
变换结果是通过_y垂直变换参数、_x水平变换参数和_radian旋转变换参数计算得到的。
变换方法就是用来修改这些参数的方法。

一般的翻转是通过把_y或_x取反来实现的，是以图片本身为坐标的翻转。
但用户的习惯是按浏览器坐标来翻转的，当图片先旋转变换坐标后再翻转，就不符合用户习惯了。
为了能按视觉习惯坐标来翻转，程序使用的方法是先旋转再翻转来实现。
例如vertical垂直翻转是图片旋转180度，再进行一般的水平翻转：

this._radian = Math.PI - this._radian; this._x *= -1;

而horizontal水平翻转也类似：

this._radian = Math.PI - this._radian; this._y *= -1;

实际也是利用了一些坐标变换原理。

rotate旋转是以弧度为单位的，直接修改_radian参数。
rotatebydegress是以角度为单位的旋转，其实是用degress * Math.PI/180公式把角度转换成弧度。
left向左转90度是在原有弧度减Math.PI/2（即90度），而right向右转90度是加Math.PI/2。

scale缩放就是根据缩放比率分别对_y和_x进行修改。
程序定义了一个getZoom修正缩放比率函数：

function getZoom(scale, zoom) {
return scale > 0 && scale >-zoom ? zoom :
scale < 0 && scale < zoom ?-zoom : 0;
}

只有当比率不会导致结果是反值的情况才会返回正确的比率。
这里主要是保证缩到最小时不会因为比率太大得到反值，导致图片翻转并放大。
当垂直和水平比率都不是0，才会对参数进行修改：

var hZoom = getZoom( this._x, zoom ), vZoom = getZoom( this._y, zoom );
if ( hZoom && vZoom ) {
this._x += hZoom; this._y += vZoom;
}

这样可以保证水平和垂直缩放同时进行，保持图片比例。
要注意zoomin放大时要保证缩放比率为正数，zoomout缩小就要负数。

这些方法会在模式设置中扩展到程序中：

$$A.forEach( ImageTrans.transforms, function(transform, name){
    this[ name ] = function(){
        transform.apply( this, [].slice.call(arguments) );
        this._show();
    }
}, this );

在执行完变换方法后，就会执行_show来显示变换。

【transform】

变换换流程介绍完，就进入主题，介绍三个变换方法了。
先看看css3的transform，它包含以下变换方法：
matrix：矩阵变形，使用它就可以做到后面所有的变换，但使用相对麻烦；
translate/translateX/translateY：坐标变换，就是移动坐标的意思；
scale/scaleX/scaleY：缩放变换，放大缩小，取负值可以做翻转；
rotate：旋转变换，根据角度旋转；
skew/skewX/skewY：拉扯变换，就是上下或左右向不同的方向扯开的效果。
更详细的介绍请看w3c的CSS 2D Transforms或者MDC的-moz-transform。

要进行变换，首先要看看浏览器是否支持：

var style = document.createElement("div").style;
return $$A.some(
    [ "transform", "MozTransform", "webkitTransform", "OTransform", "msTransform" ],
    function(css){ if ( css in style ) {
        css3Transform = css; return true;
    }});

由于程序运行时文档可能还没载入，所以要手动创建一个元素来测试。
虽然w3c标准使用的是transform，但现阶段各浏览器还是需要各自的前缀。
当元素样式包含其中一个变换样式，说明该浏览器支持，再用css3Transform记录样式名字。

在css3模式的init程序中，会执行initImg方法对图片进行设置：

$$D.setStyle( img, {
    position: "absolute",
    border: 0, padding: 0, margin: 0, width: "auto", height: "auto",
    visibility: "hidden"
});
container.appendChild( img );

主要是设置绝对定位、隐藏和重置样式，最后插入容器。
ps：图片对象虽然是用new Image()创建的，但也可以当作img元素来操作。

在load加载程序中，再对图片样式进行设置：

$$D.setStyle( img, {
    top: ( this._clientHeight - img.height ) / 2 + "px",
    left: ( this._clientWidth - img.width ) / 2 + "px",
    visibility: "visible"
});

设置left和top使图片在容器里居中，并显示图片。

关键的show程序，用来进行图片变换，这里用的是matrix变换。
matrix有6个参数，前4个是矩阵变换参数，后两个是坐标变换参数。
要根据弧度旋转，可以这样设置矩阵：
cos(a) -sin(a)
sin(a) cos(a)
而缩放变换就这样设置：
sx 0
0 sy
旋转同时缩放，矩阵相乘得到：
cos(a)*sx -sin(a)*sy
sin(a)*sx cos(a)*sy
关于Matrix矩阵变换可以看w3c的Transform Matrix。

getMatrix函数就是通过以上矩阵计算matrix参数：

var Cos = Math.cos(radian), Sin = Math.sin(radian);
return {
M11: Cos * x, M12:-Sin * y,
M21: Sin * x, M22: Cos * y
};

在show程序里面，用getMatrix得到参数后，就可以设置样式：

this._img.style[ css3Transform ] = "matrix("
+ matrix.M11 + "," + matrix.M21 + ","
+ matrix.M12 + "," + matrix.M22 + ", 0, 0)";

在实际使用中，使用matrix可能要设置一堆可读性很差的数字，所以还是推荐用其他变换方法。

【Matrix滤镜】

ie的Matrix滤镜跟css3的matrix差不多，也能实现类似的变换。
Matrix滤镜有以下属性：
Dx/Dy：坐标变换参数；
enabled：是否可用；
FilterType：定义新内容的像素的方法；
M11/M12/M21/M22：矩阵变换参数；
SizingMethod：容器是否改变尺寸去适应目标图像。
详细参考msdn的Matrix Filter和中文Matrix说明。

判断浏览器是否支持，也是创建一个div，看它有没有"filters"属性：

function(){ return "filters" in document.createElement("div"); }()

在init程序中也用initImg方法对图片进行设置，此外还需要设置Matrix滤镜：

this._img.style.filter = "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand')";

这里会设置SizingMethod属性，它有两个值，分别是：clip to original（容器不改变尺寸）和auto expand（容器改变尺寸以适应目标图像）。
如果使用默认值clip to original，容器的大小不会变，那么变换时超出容器的部分就会隐藏不见，所以这里要设为'auto expand'才能完整显示图片。

在load程序中显示图片，为了防止ie重复加载gif的bug还要重置onload为null。
ps：该bug的研究可以参考这里的显示预览部分。

而show程序也跟css3模式类似，通过getMatrix方法获取变换参数，并设置到滤镜中：

$$.extend(
img.filters.item("DXImageTransform.Microsoft.Matrix"),
getMatrix( this._radian, this._x, this._y )
);

滤镜使用了'auto expand'后，变换时图片元素尺寸会随着内容变化，所以要重新设置居中：

img.style.top = ( this._clientHeight - img.offsetHeight ) / 2 + "px";
img.style.left = ( this._clientWidth - img.offsetWidth ) / 2 + "px";

ie还有其他变换滤镜，例如FlipH（水平翻转）、FlipV（垂直翻转）、Wave（扭曲）等。

【canvas】

通过滤镜和css3已经能在主流的浏览器上兼容实现相同的变换，最后再用canvas来实现。
canvas是一个用来绘制图形的元素，它最强大的地方在于结合js来绘制图形甚至制作动画和游戏。
ps：这里推荐几个入门文章：Opera的HTML 5 canvas和深入了解canvas标签系列。

要知道浏览器是否支持canvas，可以创建一个canvas元素，看它是否有"getContext"方法来判断：

function(){ return "getContext" in document.createElement('canvas'); }()

getContext方法用来获取渲染空间（也叫上下文），之后会在这个空间绘图，相当于获取画布。

在init程序中，创建并设置canvas及其上下文context：

var canvas = this._canvas = document.createElement('canvas'),
context = this._context = canvas.getContext('2d');

$$D.setStyle( canvas, { position: "absolute", left: 0, top: 0 } );
canvas.width = this._clientWidth; canvas.height = this._clientHeight;
this._container.appendChild(canvas);

程序中只需要2D canvas，所以用getContext('2d')就行了。
ps：关于3D canvas在Opera的HTML 5 canvas有相关的介绍。
还需要设置尺寸，这里要注意要用width和height来设置，我试过用样式来设置，结果画图不正常。

在show程序中进行变换和画图：

context.save();
context.clearRect( 0, 0, clientWidth, clientHeight );
context.translate( clientWidth / 2 , clientHeight / 2 );
context.rotate( this._radian );
context.scale( this._x, this._y );
context.drawImage( img, -img.width / 2, -img.height / 2 );
context.restore();

这里用到了canvas几种方法：
save：保存状态；
clearRect：清除画布；
translate：水平/垂直移动坐标；
rotate：旋转坐标；
scale：缩放坐标；
drawImage：插入图像；
restore：恢复状态。

canvas没有直接清除整个画布的方法，只能用clearRect来间接实现。
它的四个参数用来定义一个矩形，只要定义一个画布大小的矩形就能清除整个画布了。

在canvas里面没有left/top，位置的变换只能用translate来设置，程序用它把坐标移到画布中心。
canvas没有Matrix那样的东西，只能用rotate和scale来变换，用法跟css3的类似。
canvas也没有css3的skew（拉扯)变换。

最后用drawImage画图，可以是img元素、Image对象或Canvas元素，另外两个参数是画图位置，程序用它来居中图像。

每次画图都可能会改变坐标，下次想还原坐标来画图要逐个恢复会很麻烦，这时应该用save和restore来保存和还原状态。
save和restore能保存和还原包括translate、rotate、scale变换后的画布状态，常常配合clearRect来做动画。

除了以上方法，canvas还有很多属性和方法来绘图，详细可以看HTML DOM CanvasRenderingContext2D 对象。

【拖动旋转/滚轮缩放】

拖动旋转效果是在容器按下鼠标并拖动的过程中，图像会跟着鼠标转动。
原理是以容器中点为中心，计算按下鼠标位置的弧度R1和拖动到达位置的弧度R2，两者的差就是根据鼠标要旋转的弧度，再加上原来的弧度R0，即R2-R1+R0，就能得到当前要设置的弧度了。
关键的地方就在于如何获取这个弧度，如果要手动计算这个值会很复杂，好在js提供了Math.atan2(y,x)方法，可以返回由 X 轴到 (y,x) 点的弧度，这样直接用坐标就可以得到弧度。
例如中心坐标是(x,y)，某一点的坐标是(x1,y1)，可以这样得到那个点相对中心坐标的弧度：Math.atan2(y1-y,x1-x)。

首先在鼠标的mousedown中记录容器的中心坐标：

var rect = $$D.clientRect( this._container );
this._mrX = rect.left + this._clientWidth / 2;
this._mrY = rect.top + this._clientHeight / 2;

再根据clientX/clientY当前位置坐标计算弧度：

this._mrRadian = Math.atan2( e.clientY - this._mrY, e.clientX - this._mrX ) - this._radian;

这里把原来的弧度也顺便计算了。
在拖动的过程中，根据移动坐标获取弧度，并调用rotate来旋转：

this.rotate( Math.atan2( e.clientY - this._mrY, e.clientX - this._mrX ) - this._mrRadian );

ps：拖动效果请看这里关于拖动的研究。

滚轮缩放效果就是在容器上滚动鼠标会自动实现缩放效果。
这个比较简单，主要是一些兼容问题，相关研究可以参考这里的鼠标滚动缩放。

使用技巧

【模式选择】

模式设置中说明了自定义模式可以用这样的格式："css3|filter|canvas"。
程序会自动按优先顺序选择支持的模式。
为了尽量保证浏览器支持选择的模式，可以把三个模式都用上。
一般filter是必须的，因为目前ie只支持这个，而css3和canvas可以自行选择。
我在自己的电脑做了效率测试（就是用鼠标狂转图片），看cpu的占用情况：
ff css3 40%
ff canvas 35%
opera css3 30%
opera canvas 35%
chrome css3 25%
chrome canvas 55%
safari css3 20%
safari canvas 55%
看来在ff和opera是canvas好一点，在WebKit就是css3快得多。
但canvas只能画静态图片，对于gif那样的动态图片只能显示一帧，所以还是选css3比较好。

还有css3的变换能用在所有元素中（ie8的滤镜也可以），适用在html的变换，而canvas就更适合做复杂的图形和动画。

【选择图片】

程序实例化之后，还需要调用load方法加载指定的图片。
参数可以是图片的路径，data url（支持的话），ie6还可以用本地路径。
如果是gif图片，就要注意不要用canvas，原因上面也说了，canvas只能显示一帧图片。

使用说明

实例化时，必须有容器对象或id作为参数：

var trans = new ImageTrans( container );

然后调用load方法加载图片：

trans.load(img);

可选参数用来设置系统的默认属性，包括：
属性:    默认值//说明
mode:  "css3|filter|canvas",
zoom:  .1,//缩放比率
onPreLoad: function(){},//图片加载前执行
onLoad:  function(){},//图片加载后执行
onError: function(err){}//出错时执行
其中zoom、onPreLoad、onLoad、onError属性可以在程序初始化后动态设置。

提供以下变换方法：
vertical：垂直翻转
horizontal：水平翻转
rotate: 旋转
left：向左转90度
right：向右转90度
rotatebydegress：根据角度旋转
scale：缩放
zoomin：放大
zoomout：缩小

还提供了以下方法：
load：加载图片；
reset：重置图像为默认状态；
dispose：销毁程序。

加入拖动旋转扩展程序或滚轮缩放扩展程序后，会自动启用，可以自定义mouseRotate或mouseZoom属性为false来取消。

程序源码

拖动旋转扩展

ImageTrans.prototype._initialize = (function(){
    var init = ImageTrans.prototype._initialize,
        methods = {
            "init": function(){
                this._mrX = this._mrY = this._mrRadian = 0;
                this._mrSTART = $$F.bind( start, this );
                this._mrMOVE = $$F.bind( move, this );
                this._mrSTOP = $$F.bind( stop, this );
            },
            "initContainer": function(){
                $$E.addEvent( this._container, "mousedown", this._mrSTART );
            },
            "dispose": function(){
                $$E.removeEvent( this._container, "mousedown", this._mrSTART );
                this._mrSTOP();
                this._mrSTART = this._mrMOVE = this._mrSTOP = null;
            }
        };
    //开始函数
    function start(e){
        var rect = $$D.clientRect( this._container );
        this._mrX = rect.left + this._clientWidth / 2;
        this._mrY = rect.top + this._clientHeight / 2;
        this._mrRadian = Math.atan2( e.clientY - this._mrY, e.clientX - this._mrX ) - this._radian;
        $$E.addEvent( document, "mousemove", this._mrMOVE );
        $$E.addEvent( document, "mouseup", this._mrSTOP );
        if ( $$B.ie ) {
            var container = this._container;
            $$E.addEvent( container, "losecapture", this._mrSTOP );
            container.setCapture();
        } else {
            $$E.addEvent( window, "blur", this._mrSTOP );
            e.preventDefault();
        }
    };
    //拖动函数
    function move(e){
        this.rotate( Math.atan2( e.clientY - this._mrY, e.clientX - this._mrX ) - this._mrRadian );
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    };
    //停止函数
    function stop(){
        $$E.removeEvent( document, "mousemove", this._mrMOVE );
        $$E.removeEvent( document, "mouseup", this._mrSTOP );
        if ( $$B.ie ) {
            var container = this._container;
            $$E.removeEvent( container, "losecapture", this._mrSTOP );
            container.releaseCapture();
        } else {
            $$E.removeEvent( window, "blur", this._mrSTOP );
        };
    };
    return function(){
        var options = arguments[1];
        if ( !options || options.mouseRotate !== false ) {
            //扩展钩子
            $$A.forEach( methods, function( method, name ){
                $$CE.addEvent( this, name, method );
            }, this );
        }
        init.apply( this, arguments );
    }
})();

滚轮缩放扩展

ImageTrans.prototype._initialize = (function(){
    var init = ImageTrans.prototype._initialize,
        mousewheel = $$B.firefox ? "DOMMouseScroll" : "mousewheel",
        methods = {
            "init": function(){
                this._mzZoom = $$F.bind( zoom, this );
            },
            "initContainer": function(){
                $$E.addEvent( this._container, mousewheel, this._mzZoom );
            },
            "dispose": function(){
                $$E.removeEvent( this._container, mousewheel, this._mzZoom );
                this._mzZoom = null;
            }
        };
    //缩放函数
    function zoom(e){
        this.scale((
            e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3
        ) * Math.abs(this._zoom) );
        e.preventDefault();
    };
    return function(){
        var options = arguments[1];
        if ( !options || options.mouseZoom !== false ) {
            //扩展钩子
            $$A.forEach( methods, function( method, name ){
                $$CE.addEvent( this, name, method );
            }, this );
        }
        init.apply( this, arguments );
    }
})();

完整实例下载

本文链接

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

2010-07-29T01:03:00Z

滑动展示效果主要用在图片或信息的滑动展示，也可以设置一下做成简单的口风琴（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

效果预览

模式: 默认索引: 尺寸:
关闭: 速度: tween:

图片滑动展示效果：

内裤蛋糕神秘浪漫的内裤蛋糕礼盒
内裤蛋糕送给最亲密的TA~~
内裤蛋糕超SWEET~~打开漂亮的礼品盒，甜蜜可爱的蛋糕呈现眼前
内裤蛋糕好Q哦！慢慢解开丝带，竟然是一条条漂亮的内裤
内裤蛋糕超级SWEET又脸红耶！！！

仿口风琴（Accordion）效果：

图片放大效果: 这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。查看全文

Lazyload 延迟加载效果: Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。网上也有不少类似的效果。查看全文

图片上传预览效果: 图片上传预览是一种在图片上传之前对图片进行本地预览的技术。使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。查看全文

Tween算法及缓动效果: Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。我这里要教大家的是怎么利用flash的Tween类的算法，来做js的Tween算法。查看全文

Table行定位效果: 近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。查看全文

程序说明

【基本原理】

通过设置滑动元素的位置坐标(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模式。
这个属性是为了解决一个问题，例如right模式要实现类似下面的效果：

有两种方法，可以调整元素插入顺序：

但这样需要修改dom结构，或者通过zIndex设置堆叠顺序：

显然设置zIndex的方法比较好，程序也用了这个方法。
程序就是用_reverse属性来判断是否需要做这些修正。

首先在_initContainer中，根据_reverse重新设置zIndex：

var zIndex = 100, gradient = this._reverse ? -1 : 1;
this._each( function(o){
var style = o.node.style;
style.position = "absolute"; style.zIndex = zIndex += gradient;
});

在_initNodes中，获取默认目标值时也要判断：

getDefaultTarget = this._reverse
? function(i){ return defaultSize * ( maxIndex - i ); }
: function(i){ return defaultSize * i; },

当_reverse为true时，由于定点位置是在索引的反方向，设置元素时也应该倒过来设的，所以要用maxIndex减一下。

在_setMove中，根据索引设置滑动目标值时，也要判断：

if ( this._reverse ) {
    var get = getTarget;
    index = maxIndex - index;
    getTarget = function(o, i){ return get( o, maxIndex - i ); }
}

不但滑动对象集合的索引要修正，展示对象的索引也要修正。

【自动展示扩展】

这次扩展用的是组合模式，原理参考的ImageZoom扩展篇的扩展模式部分。
不同的是加了一个属性扩展，用来添加扩展方法：

$$.extend( this, prototype );

注意不能添加到SlideView.prototype，这样会影响到SlideView的结构。

“自动展示”要实现的是滑动对象自动轮流展示，并且取消默认状态而实行强制展示，可以用在图片的轮换展示。
只要在SlideView后面加入自动展示扩展程序，并且auto参数设为true就会启用。
原理也很简单，就是每次滑动/移动完成后，用定时器执行下一次滑动就行了。

首先在"init"初始化程序中，增加一个_NEXT程序，用来展示下一个滑动对象：

this._NEXT = $$F.bind( function(){ this.show( this._index + 1 ); }, this );

其实就是把当前索引_index加1之后作为show的参数执行。
再增加一个_autoNext方法：

if ( !this._autoPause ) {
clearTimeout(this._autoTimer);
this._autoTimer = setTimeout( this._NEXT, this.autoDelay );
}

作用是延时执行_NEXT程序，并且有一个_autoPause属性用来锁定执行。

然后设置几个需要执行的地方。
首先在"finish"完成滑动事件中，执行_autoNext方法，这样就实现了基本的自动展示了。
在鼠标进入滑动元素后，应该停止自动切换，所以在"enter"进入滑动元素事件中，会清除定时器并把_autoPause设为true来锁定。
对应地在"leave"鼠标离开容器事件中，要把_autoPause设回false解除锁定，再执行_autoNext方法重新启动自动程序。
并且在"leave"中设置autoClose为false，防止自动恢复默认状态。

最后还要重写reset：

reset.call( this, index == undefined ? this._index : index );
this._autoNext();

重写后的reset会强制设置索引来展示，并执行_autoNext进行下一次滑动。

【提示信息扩展】

“提示信息”效果是指每个滑动对象对应有一个提示信息（内容）的层（元素）。
这个提示信息会在滑动对象展示时展示，收缩和关闭时关闭。
只要加入提示信息扩展程序，并且tip参数设为true就会启用。

提示扩展支持四种位置提示：bottom、top、right、left。
在"init"中，根据自定义tipMode获取_tipPos坐标样式：

this._tipPos = /^(bottom|top|right|left)$/.test( this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";

接着在"initNodes"定义一个能根据滑动元素获取提示元素的函数：

如果自定义了tipTag，就会根据标签来获取元素，否则就按默认值"*"获取全部元素。
如果自定义了tipClass，就会再根据className来筛选元素，注意可能包含多个样式，不能直接等于。

得到函数后，再创建提示对象：

this._each( function(o) {
    var node = o.node, tipNode = getTipNode(node);
    node.style.overflow = "hidden";
    tipNode.style.position = "absolute"; tipNode.style.left = 0;

    o.tip = {
        "node": tipNode,
        "show": tipShow != undefined ? tipShow : 0,
        "close": tipClose != undefined ? tipClose : -tipNode[offset]
    };
});

先获取提示元素，并设置相关样式，再给滑动对象添加一个tip属性，保存对应的提示对象。
其中"node"属性保存提示元素，"show"是展示时的坐标值，"close"是关闭时的坐标值。
如果没有自定义tipShow，默认展示时坐标值是0，即提示元素刚好贴在滑动元素边上的位置；
如果没有自定义tipClose，默认关闭时坐标是提示元素的尺寸，即提示元素刚好隐藏在滑动元素外面的位置。

在"setMove"中设置提示移动目标值：

var maxIndex = this._nodes.length - 1;
this._each( function(o, i) {
    var tip = o.tip;
    if ( this._reverse ) { i = maxIndex -i; }
    tip.target = index == undefined || index != i ? tip.close : tip.show;
    tip.begin = tip.current; tip.change = tip.target - tip.begin;
});

这个比滑动对象的设置简单得多，当设置了index参数，并且index等于该滑动对象的索引时才需要展示，其他情况都是隐藏。
要注意，跟滑动对象一样，在_reverse为true的时候需要修正索引。
在"tweenMove"、"targetMove"、"defaultMove"也要设置对应的移动函数。

为了方便样式设置，扩展了一个_setTipPos方法：

var pos = this._tipPos;
this._each( function(o, i) {
var tip = o.tip;
tip.node.style[ pos ] = (tip.current = method.call( this, tip )) + "px";
});

根据_tipPos坐标样式来设置坐标值。

使用技巧

【展示尺寸】

要自定义展示尺寸可以通过max和min来设置，可以按像素或百分比来计算。
如果不设置的话，就会按照元素本身的尺寸来展示。
所以滑动元素展示的尺寸并不需要一致的，程序可以自动计算。

【Accordion效果】

Accordion是可折叠的面板控件，效果类似手风琴，SlideView通过设置也能做到类似的效果。
首先把autoClose设为false取消自动关闭，再设置defaultIndex，使SlideView处于展开状态不会关闭。
一般Accordion都有一个固定尺寸的标题，这个可以用min来设置。
这样就实现了简单的Accordion效果，具体参考第三个实例。

使用说明

实例化时，必须有容器对象或id作为参数：

new SlideView( "idSlideView" );

可选参数用来设置系统的默认属性，包括：
属性:    默认值//说明
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//关闭时目标坐标

程序源码

自动展示扩展

SlideView.prototype._initialize = (function(){
    var init = SlideView.prototype._initialize,
        reset = SlideView.prototype.reset,
        methods = {
            "init": function(){
                this.autoDelay = this.options.autoDelay | 0;

                this._autoTimer = null;//定时器
                this._autoPause = false;//暂停自动展示
                //展示下一个滑动对象
                this._NEXT = $$F.bind( function(){ this.show( this._index + 1 ); }, this );
            },
            "leave": function(){
                this.autoClose = this._autoPause = false;
                this._autoNext();
            },
            "enter": function(){
                clearTimeout(this._autoTimer);
                this._autoPause = true;
            },
            "finish": function(){
                this._autoNext();
            },
            "dispose": function(){
                clearTimeout(this._autoTimer);
            }
        },
        prototype = {
            _autoNext: function(){
                if ( !this._autoPause ) {
                    clearTimeout(this._autoTimer);
                    this._autoTimer = setTimeout( this._NEXT, this.autoDelay );
                }
            },
            reset: function(index) {
                reset.call( this, index == undefined ? this._index : index );
                this._autoNext();
            }
        };
    return function(){
        var options = arguments[1];
        if ( options && options.auto ) {
            //扩展options
            $$.extend( options, {
                autoDelay:    2000//展示时间
            }, false );
            //扩展属性
            $$.extend( this, prototype );
            //扩展钩子
            $$A.forEach( methods, function( method, name ){
                $$CE.addEvent( this, name, method );
            }, this );
        }
        init.apply( this, arguments );
    }
})();

提示信息扩展

SlideView.prototype._initialize = (function(){
    var init = SlideView.prototype._initialize,
        methods = {
            "init": function(){
                //坐标样式
                this._tipPos = /^(bottom|top|right|left)$/.test( this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";
            },
            "initNodes": function(){
                var opt = this.options, tipTag = opt.tipTag, tipClass = opt.tipClass,
                    re = tipClass && new RegExp("(^|\\s)" + tipClass + "(\\s|$)"),
                    getTipNode =  function(node){
                        var nodes = node.getElementsByTagName( tipTag );
                        if ( tipClass ) {
                            nodes = $$A.filter( nodes, function(n){ return re.test(n.className); } );
                        }
                        return nodes[0];
                    };
                //设置提示对象
                var tipShow = opt.tipShow, tipClose = opt.tipClose,
                    offset = /right|left/.test( this._tipPos ) ? "offsetWidth" : "offsetHeight";
                this._each( function(o) {
                    var node = o.node, tipNode = getTipNode(node);
                    node.style.overflow = "hidden";
                    tipNode.style.position = "absolute"; tipNode.style.left = 0;
                    //创建提示对象
                    o.tip = {
                        "node": tipNode,
                        "show": tipShow != undefined ? tipShow : 0,
                        "close": tipClose != undefined ? tipClose : -tipNode[offset]
                    };
                });
            },
            "setMove": function(index){
                var maxIndex = this._nodes.length - 1;
                this._each( function(o, i) {
                    var tip = o.tip;
                    if ( this._reverse ) { i = maxIndex -i; }
                    tip.target = index == undefined || index != i ? tip.close : tip.show;
                    tip.begin = tip.current; tip.change = tip.target - tip.begin;
                });
            },
            "tweenMove": function(){
                this._setTipPos( function(tip) {
                    return Math.round( this.tween( this._time, tip.begin, tip.change, this.duration ) );
                });
            },
            "targetMove": function(){
                this._setTipPos( function(tip){ return tip.target; });
            },
            "defaultMove": function(){
                this._setTipPos( function(tip){ return tip.close; });
            },
            "dispose": function(){
                this._each( function(o){ o.tip = null; });
            }
        },
        prototype = {
            //设置坐标值函数
            _setTipPos: function(method) {
                var pos = this._tipPos;
                this._each( function(o, i) {
                    var tip = o.tip;
                    tip.node.style[ pos ] = (tip.current = method.call( this, tip )) + "px";
                });
            }
        };
    return function(){
        var options = arguments[1];
        if ( options && options.tip == true ) {
            //扩展options
            $$.extend( options, {
                tipPos:        "bottom",//提示位置
                tipTag:        "*",//提示元素标签
                tipClass:    "",//提示元素样式
                tipShow:    null,//展示时目标坐标
                tipClose:    null//关闭时目标坐标
            }, false );
            //扩展属性
            $$.extend( this, prototype );
            //扩展钩子
            $$A.forEach( methods, function( method, name ){
                $$CE.addEvent( this, name, method );
            }, this );
        }
        init.apply( this, arguments );
    }
})();

完整实例下载

本文链接