程序扩展了拖动视觉变换和滚轮深度变换。
拖动和滚动的做法跟上一个的做法差不多，这里拖动是实现方向的变换，滚轮是实现深度的变换。
移动是通过修改_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：销毁程序。
加入拖动方向变换或滚轮深度变换扩展后，可通过设置相关参数定义变换范围。
打包下载地址
演示地址 /201010/yuanma/Image3D.rar
您可能感兴趣的文章: