Hover the mouse over a large image and move it with the mouse pointer. hover over the large image.

Hover the mouse over a large image and move it with the mouse pointer. hover over the large image.

Hover the mouse over a large image and move it with the mouse pointer:
In some websites with image lists, a large image can be displayed when you place the cursor on a small image. When you move the cursor over the image, the large image can also move with the mouse pointer, it is very user-friendly and also improves the dynamic effect of the website. The following describes how to achieve this effect:

<! DOCTYPE html> 
The Code achieves the effect. When the mouse is placed on the image, a large image can appear. When the mouse moves in the small image, the big image will also follow the mouse pointer movement.
The following describes how to achieve this effect:
I. Implementation principle:
When you place the cursor over an image, the hover event of the thumbnail is triggered. The hover event processing function can add p elements to the body to control the display of the large image and call widthJudge () the function is used to control the coordinates of a large image. When the mouse leaves, the added p element is removed to make the big image disappear. When you move the mouse over a thumbnail, The mousemove event of the thumbnail is triggered. This event handler can call the widthJudge () function to control the coordinates of the thumbnail.
Ii. Code comments:
1. $ (function () {}, specifies that the code in the function will be executed when the document structure is fully loaded.
2. var x = 22 and var y = 20 are used to specify the distance between the mouse pointer and the big image.
3. $ ("a. smallimage"). hover (function (e) {}, bind the hover event handler function to the thumbnail. For more information about hover events, see jQuery's hover events.
4. $ ("body "). append ('<p id = "bigimage">  </p>'), used to add a p element. The picture in p is the big image to be displayed. The src attribute value of the larger graph is the rel attribute value of the current small graph.
5. $ (this). find ('img '). stop (). fadeTo ('slow', 0.5), and set the thumbnail to translucent.
6. $ ("# bigimage"). fadeIn ('fast ') shows the image.
7. $ (this). find ('img '). stop (). fadeTo ('low', 1) restore the thumbnail to its original state.
8. $ ("# bigimage"). remove (), remove the added p element, that is, hide the big image.
9. $ ("a. smallimage"). mousemove (function (e) {}, bind the mousemove event handler for the thumbnail to call the widthJudge () function. For details about the mousemove function, refer to the jQuery mousemove event.
10. function widthJudge (e) {}. This event is used to control the image position. e is the event object.
11. var marginRight = document.doc umentElement. clientWidth-e. pageX is used to calculate the size of the visible area on the right side of the mouse pointer.
12. var imageWidth = $ ("# bigimage"). width (), used to obtain the width of a large image.
13. if (marginRight <imageWidth) is used to determine whether the size of the visible area on the right of the mouse pointer is smaller than the width of the large image. if it is smaller than the size, the image is displayed on the left of the mouse pointer, otherwise, the cursor is displayed on the right. This is basically a mathematical logic problem.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 7989.
For more information, see: http://www.softwhy.com/jquery/