Copy Code code as follows:
$ (function () {
var box_w = $ (". PIC360 "). width ();
var box_h = $ (". PIC360 "). Height ();
var box_x = $ (". PIC360 "). Offset (). Left;
var box_y = $ (". PIC360 "). Offset (). Top;
Calculate the horizontal axis value of the center point
var center_x = Math.ceil (box_x+ (BOX_W/2));
Find the ordinate value of the center point
var center_y = Math.ceil (box_x+ (BOX_H/2));
The var movesetp = (BOX_W/2)/10//is set to move 10 times to complete the picture shown on the left. Here to find out how many pixels each move, calculate move once?;
$(". PIC360 "). MouseMove (function (event) {
var evx = Event.pagex;
var evy = Event.pagey;
The judge is left or left.
if (center_x-evx>=0) {
Changepic (Evx,evy, "left")
}else{
Changepic (Evx,evy)
}
function Changepic (mx,my,f) {
if (f) {
Find out how many times the mouse has moved, each time corresponding to an Li index.
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 ();
}
}
})
})
First, functional analysis:
1. The mouse slides to the left in the picture area, the picture "turns left".
2. The mouse slides to the right in the picture area, the picture "rotates to the right".
Second, functional analysis:
2.1 How to judge the mouse in the picture above the slide direction, that is how to know whether the mouse is left or right?
Refer to the center of the picture, to the left of the center point, to the left, to the right of the center point, to the right. The solution is to put the mouse the current X coordinate value, and the center point of the X coordinate, subtract if it is negative is left, if it is positive, it is to the right.
2.2 Mouse Slide How much distance, the picture switch one (the essence of rotation, is different surface of the picture, in the toggle display)?
Analysis: 2.21 whole picture A total of 18, switch left 10, right is to switch 8. So all the pictures, can be shown, that can have 360 degrees of effect.
2.22 mouse in the picture left and right to move the largest distance is half the width of the picture, if I set 10 times to move the picture all over again, then use this maximum distance divided by 10, get each move how much distance, calculate once, and this time will switch a picture.
Demo Download http://demo.jb51.net/js/2012/mypic360/
