jquery实现图片360度旋转特效【原创】

首先引用文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">

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();
		}
	}
})