基于jQuery的360圖片展示實(shí)現(xiàn)代碼

更新時(shí)間：2012年06月14日 13:03:40 作者：

基于jQuery的360圖片展示實(shí)現(xiàn)代碼，需要的朋友可以參考下

 
$(function(){ 
var box_W = $(".PIC360").width(); 
var box_H = $(".PIC360").height(); 
var box_X = $(".PIC360").offset().left; 
var box_Y = $(".PIC360").offset().top; 
//求出中心點(diǎn)的橫坐標(biāo)值 
var center_X = Math.ceil(box_X+(box_W/2)); 
//求出中心點(diǎn)的縱坐標(biāo)值 
var center_Y = Math.ceil(box_X+(box_H/2)); 
var moveSetp = (box_W/2)/10//設(shè)定為10次移動(dòng)，完成左邊的圖片顯示。這里求出每次移動(dòng)多少像素，算移動(dòng)一次？; 
$(".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){ 
//求出鼠標(biāo)移動(dòng)了多少次，每次對(duì)應(yīng)一個(gè)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(); 
} 
} 
}) 
}) 

一、功能分析：
　　1.鼠標(biāo)在圖片區(qū)域向左滑動(dòng)，圖片“向左轉(zhuǎn)動(dòng)”。
　　2.鼠標(biāo)在圖片區(qū)域向右滑動(dòng)，圖片“向右轉(zhuǎn)動(dòng)”。

二、功能分析：
　　2.1如何判斷鼠標(biāo)在圖片上面的滑動(dòng)方向，即如何知道鼠標(biāo)是向左還是向右？
　　以圖片的中心為參照，在中心點(diǎn)左邊，就是向左，在中心點(diǎn)右邊，就是向右。解決方法，是把鼠標(biāo)當(dāng)前的X坐標(biāo)值，與中心點(diǎn)的X坐標(biāo)值，相減如果是負(fù)數(shù)就是向左的，如果是正數(shù)，就是向右的。

　　2.2鼠標(biāo)滑動(dòng)多少距離，圖片切換一張（轉(zhuǎn)動(dòng)的實(shí)質(zhì)，是不同面的圖片，在切換顯示）?
　　分析：2.21整個(gè)圖片一共有18張，向左切換10張，向右就是切換8張。這樣所有的圖片，都能顯示出來，即可以有360度的效果。
　　　　 2.22鼠標(biāo)在圖片左邊和右邊移動(dòng)的最大距離是圖片寬度的一半，如果我設(shè)定10次移動(dòng)讓圖片全部切換一次，那么就用這個(gè)最大距離除以10，就得到每次移動(dòng)多少距離，算一次，而這一次就要切換一張圖片。

DEMO下載 http://demo.jb51.net/js/2012/mypic360/

您可能感興趣的文章: