史上最少代码量实现图片360度旋转特效

[漫画之迷]

首先非常感谢网友木木的无私分享，此作品是她网站上的第一款原创jquery实现图片360度旋转特效，效果非常棒，除了jquery插件库文件之外，实现360度旋转的功能只有27行代码，跟现有的不是开源的图片360度旋转jquery插件相比，代码非常简洁，也不需要设置和添加自定义属性，多的不讲了，网友们自己去下载看吧。。。

jquery功能代码如下

$(function(){
	var pic_X=$('.list').offset().left;
	var pic_Y=$('.list').offset().top;
	var pic_W=$('.list').width()/2;
	var pic_H=$('.list').height()/2;
	var center_X=pic_X+pic_W;
	var center_Y=pic_Y+pic_H;
	var movestop=pic_W/10;
	$('.list').mousemove(function(event){
		var mouse_X=event.pageX;
		var mouse_Y=event.pageY;
		if(mouse_X-center_X<=0){
			//鼠标在中心的左侧
			moveImg(mouse_X,mouse_Y,'left')
		}else{
			moveImg(mouse_X,mouse_Y)
		}
	});
	function moveImg(m_X,m_Y,dir){
		var index=Math.ceil(Math.abs(m_X-center_X)/movestop);
		if(dir){
			$('.list li').eq(index).show().siblings().hide();
		}else{
			$('.list li').eq(18-index).show().siblings().hide();
		}
	}
})

效果如下：



.

[l676331991]

被效果震惊得出了一身冷汗，真的是360度无死角观看！ 不过首先还是要感谢一下LZ的分享。接着容我小小吐槽一下，这就是加载了10张不通方位拍摄的照片，然后切换图片显隐啊~~~

[notlikeGaoShou]

[lzc0653]

地址在哪里？

[jiafeng_lee]

不错，好东西哇

[漫画之迷]

地址：http://www.jq-school.com/Detail.aspx?id=338

[KK3K2005]

$('.list') 没有预先赋予一个变量 而是到处引用 这不科学 短有什么用

[漫画之迷]

也是网友们分享出来的，觉得挺好的就分享到这里来啦

[步枯]

难道老夫理解的360度的定义有错误？？？数学老师没说360度就是把一盒圆周分10份就是360度啊。。。

[JeremyChenX]

分享就是好东西...

[奇乐二二二]

就是播个帧动画吗 - ，-