基于jQuery的360图片展示实现代码

　　$(function(){

　　var box_W = $(".PIC360").width();

　　var box_H = $(".PIC360").height();

　　var box_X = $(".PIC360").offset().left;

　　var box_Y = $(".PIC360").offset().top;

　　//求出中心点的横坐标值

　　var center_X = Math.ceil(box_X+(box_W/2));

　　//求出中心点的纵坐标值

　　var center_Y = Math.ceil(box_X+(box_H/2));

　　var moveSetp = (box_W/2)/10//设定为10次移动，完成左边的图片显示。这里求出每次移动多少像素，算移动一次？;

　　$(".PIC360").mousemove(function(event){

　　var evX = event.pageX;

　　var evY = event.pageY;

　　//判断是向左还是向左

　　if(center_X - evX>=0){

　　changePic(evX,evY,"left")

　　}else{

　　changePic(evX,evY)

　　}

　　function changePic(mX,mY,f){

　　if(f){

　　//求出鼠标移动了多少次，每次对应一个LI的索引。

　　var index = Math.ceil(Math.abs((mX - center_X)/moveSetp));

　　$(".PIC360 li").eq(index).show().siblings().hide();

　　}else{

　　var index = Math.ceil(Math.abs((mX - center_X)/moveSetp));

　　var li_lengt = $(".PIC360 li").length;

　　$(".PIC360 li").eq(li_lengt-index).show().siblings().hide();

　　}

　　}

　　})

　　})