首先非常感谢网友Adam‘的无私分享,此js特效是他用自己写的一个JS框架Aui-core实现的,Aui-core暂时是测试版本,这一版添加了CSS3的元素,所以网友们在浏览的时间请不要用IE浏览器来运行,为了让网友们看到最终效果请使用谷歌、火狐等浏览打开运动。不说了,大家先看效果吧。
修正了以下内容:
1、就是改成面向对象的写法了
2、修正了点闪烁的BUG
3、360度旋转
4、鼠标滚动切换视景
主要代码如下:
oImg.bind( "mousedown", function(){
oDoc.mousemove( function( e ){
var mouseX = e.clientX,
// 继续
mouseY = e.clientY,
val = tmp - mouseX;
if( val > 50 ){
_IDX += 1;
transform( oCon[0], "rotateY( "+ ( _IDX * deg ) +"deg )");
}else if( val < -50 )
{
_IDX -= 1;
transform( oCon[0], "rotateY( "+ ( _IDX * deg ) +"deg )");
};
tmp = mouseX;
return false;
});
oDoc.mouseup( function(){
tmp = 0;
this.onmousemove = null;
this.onmouseup = null;
});
return false;
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
Aui-core css3 旋转特效 图片3D旋转 图片轮播 图片播放 图片特效 幻灯片 js特效 拖拽 360度旋转