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

1. 기능 분석:
　1. 사진 영역에서 마우스를 왼쪽으로 슬라이드한 후, 그림이 "왼쪽으로 회전"합니다. 2. 사진 영역에서 마우스를 오른쪽으로 밀면 사진이 "오른쪽으로 회전"합니다.


2. 기능 분석:
2.1 사진에서 마우스가 미끄러지는 방향을 확인하는 방법, 즉 마우스가 왼쪽으로 움직이는지 오른쪽으로 움직이는지 확인하는 방법은 무엇입니까? 사진의 중심을 기준으로 왼쪽이 왼쪽, 중심점 오른쪽이 오른쪽입니다. 해결 방법은 중심점의 X 좌표 값에서 마우스의 현재 X 좌표 값을 빼는 것입니다. 음수이면 왼쪽입니다.

2.2 사진을 전환하려면 마우스를 얼마나 멀리 밀어야 하나요?(회전의 핵심은 서로 다른 면의 사진이 전환되어 표시된다는 것입니다.)
분석: 2.21 총 18장의 사진이 있으며, 10장의 사진이 있습니다. 왼쪽으로 전환되고, 오른쪽으로 전환하면 8개의 사진으로 전환됩니다. 이러한 방식으로 모든 사진을 표시할 수 있습니다. 즉, 360도 효과를 얻을 수 있습니다.
2.22 그림의 왼쪽과 오른쪽에서 마우스가 이동할 수 있는 최대 거리는 그림 너비의 절반입니다. 모든 그림을 한 번 전환하려면 최대 거리를 10으로 나누어야 합니다. 매번 이동한 거리는 한 번만 계산되며 이번에는 사진을 전환해야 합니다.

데모 다운로드
http://demo.jb51.net/js/2012/mypic360/