jQuery_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 に設定します。
$(".PIC360").mousemove(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){
//マウスが移動された回数を調べる, それぞれの時間は 1 つの LI のインデックスに対応します。 ).show ().siblings().hide();
}else{
var index = Math.abs((mX - center_X)/moveSetp)); $(" .PIC360 li").length;
$(".PIC360 li").eq(li_lengt-index).show().siblings().hide();
}
})
})




1. 関数分析:

1. 画像領域でマウスを左にスライドし、写真は「左に曲がります」。
2. 画像エリアでマウスを右にスライドすると、画像が「右に回転」します。
2. 関数分析:

2.1 画像上でのマウスのスライド方向を決定する方法、つまり、マウスが左に動いているか右に動いているかを知る方法は?
写真の中心を基準に、中心点より左が左、中心点より右が右です。解決策は、中心点の X 座標値からマウスの現在の X 座標値を減算することです。それが負の数の場合は左に、正の数の場合は右に移動します。 2.2 画像を切り替えるためにマウスをどれだけスライドさせますか (回転の本質は、異なる側の画像が切り替えられて表示されることです)
分析: 2.21 合計 18 枚の画像があり、10 枚の画像があります。左に切り替えると8枚の写真に切り替わります。このようにして、すべての画像を表示することができ、つまり 360 度の効果を実現できます。
2.22 画像の左側と右側でマウスが移動できる最大距離は画像の幅の半分です。すべての画像を一度に切り替えるのに 10 回の移動を設定した場合、最大距離を 10 で割ると次のようになります。移動するたびに距離が 1 回カウントされ、今度は画像を切り替える必要があります。

デモのダウンロード
http://demo.jb51.net/js/2012/mypic360/