热门关键字:
jquery > jquery插件 > html5 > 网友Adam‘分享用Aui-core实现的图片3D旋转JS特效

网友Adam‘分享用Aui-core实现的图片3D旋转JS特效

17730
所属分类:html5
发布时间:2012/12/15 13:59:21
下载量:2427
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=130

首先非常感谢网友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;
});

 

效果如下:

网友Adam‘分享用Aui-core实现的图片3D旋转JS特效

 

 

 





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:Aui-core css3 旋转特效 图片3D旋转 图片轮播 图片播放 图片特效 幻灯片 js特效 拖拽 360度旋转
  • 网友Adam‘分享用Aui-core实现的图片3D旋转JS特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友Adam‘分享用Aui-core实现的图片3D旋转JS特效
  • 网友Adam‘分享用Aui-core实现的图片3D旋转JS特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐