首頁 > web前端 > js教程 > 基於jQuery的360圖片展示實現代碼_jquery

基於jQuery的360圖片展示實現代碼_jquery

WBOY
發布: 2016-05-16 17:52:49
原創
1164 人瀏覽過
複製程式碼 程式碼如下:

$(function(){
var box_Wbox_ .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次移動,完成左邊的圖片顯示。 🎜>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的索引。 ().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.滑鼠在圖片區域向左滑動,圖片「向左轉動」 。
  2.滑鼠在圖片區域向右滑動,圖片「向右轉動」。
二、功能分析:

  2.1如何判斷滑鼠在圖片上方的滑動方向,即如何知道滑鼠是向左還是向右?
  以圖片的中心為參照,在中心點左邊,就是向左,在中心點右邊,就是向右。解決方法,是把滑鼠目前的X座標值,與中心點的X座標值,相減如果是負數就是向左的,如果是正數,就是向右的。
  2.2滑鼠滑動多少距離,圖片切換一張(轉動的實質,是不同面的圖片,在切換顯示)?   分析:2.21整個圖片一共有18張,向左切換10張,向右就是切換8張。這樣所有的圖片,都能顯示出來,也就是可以有360度的效果。
     2.22滑鼠在圖片左邊和右邊移動的最大距離是圖片寬度的一半,如果我設定10次移動讓圖片全部切換一次,那麼就用這個最大距離除以10,就得到每次移動多少距離,算一次,而這次就要切換一張圖片。

DEMO下載
http://demo.jb51.net/js/2012/mypic360/
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板