JQuery-based 360 image display implementation code _ jquery-js tutorial

Source: Internet
Author: User
JQuery-based 360 image display implementation code. For more information, see The Code is 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;
// Obtain the abscissa value of the center.
Var center_X = Math. ceil (box_X + (box_W/2 ));
// Obtain the ordinate value of the center.
Var center_Y = Math. ceil (box_X + (box_H/2 ));
Var moveSetp = (box_W/2)/10 // It is set to move 10 times to display the picture on the left. Here, how many pixels are moved each time ?;
$ (". PIC360"). mousemove (function (event ){
Var evX = event. pageX;
Var evY = event. pageY;
// Determine whether it is left or left
If (center_X-evX> = 0 ){
ChangePic (evX, evY, "left ")
} Else {
ChangePic (evX, evY)
}
Function changePic (mX, mY, f ){
If (f ){
// Determine how many times the mouse is moved, and each time it corresponds to a 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 ();
}
}
})
})



I. Function Analysis:
1. Move the mouse over the image area to the left, and the image is "left ".
2. Move the mouse over the image area to the right and turn the image to the right ".

Ii. Function Analysis:
2.1 How do I determine the moving direction of the mouse over the image, that is, how do I know whether the mouse is left or right?
Take the image center as a reference. On the left of the center, it is left, right on the right of the center, that is, right. The solution is to subtract the current X coordinate value of the mouse from the X coordinate value of the center. If it is a negative number, it is left. If it is a positive number, it is right.

2.2 how long is the mouse sliding distance, and the image is switched over (the essence of the rotation is different from the picture, in the switching display )?
Analysis: there are 18 images in 2.21, 10 images are switched to the left, and 8 images are switched to the right. In this way, all images can be displayed, with a 360-degree effect.
2.22 The maximum distance between the left and right sides of the image is half the width of the image. If I set 10 moves to make the image switch once, divide the distance by 10, the distance between each movement is calculated once, and an image needs to be switched this time.

DEMO download http://demo.jb51.net/js/2012/mypic360/
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.