The following image sample code is displayed in the jQuery mouse link.

The following image sample code is displayed in the jQuery mouse link.

This article introduces a commonly used effect, that is, when the mouse slides over the link, a layer that follows the mouse pointer can appear. in actual application, generally, it refers to some explanatory text or images of links. The following is a code example:

<! DOCTYPE html> 
:

The above code implements our requirements. The following describes the implementation process:
Code comment:
1. this. screenshotPreview = function (){},Declare a function to achieve the following effect. In this effect, this can be omitted, and it points to window.
2. xOffset = 10,Declare a variable to specify the horizontal distance between the mouse pointer and the displayed image.
3. yOffset = 30,Declare a variable to specify the vertical distance between the mouse pointer and the displayed image.
4. $ ("a. screenshot"). hover (function (e) {}, function (e ){}),Specifies the function to be executed when the mouse moves to the link and leaves the link.
5. this. t = this. title,Assign the title attribute value of the link to the t attribute. here this is the link object that points to the current mouse.
6. var c = (this. t! = "")? "<Br/>" + this. t :"",If this. t is not empty, that is, the title attribute value exists, insert a linefeed and connect the content of the current title. Otherwise, set c to null.
7. $ ("body "). append ("<p id = 'screenshot '> "),Add the image and related instructions to the body.
8. $ ("# screenshot" example .css ("top", (e. pageY-xOffset) + "px" ).css ("left", (e. pageX + yOffset) + "px "). fadeIn ("fast "),Set the top and left attribute values of the p element and use the fade-in effect.
9. this. title = this. t,Assign the title content to this. title. In fact, there is no problem with this sentence. It is a bit redundant.
10. $ ("# screenshot"). remove (),Remove the p element.
11. $ ("a. screenshot"). mousemove (function (e ){}),It is used to set the image to follow when the mouse pointer moves.
12. $ ("# screenshot" example .css ("top", (e. pageY-xOffset) + "px "). css ("left", (e. pageX + yOffset) + "px "),Set the top and left attribute values of the p element to achieve the following effect.
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

 

 
  
JQuery Implementation of Hyperlink mouse tip effect method
 
  
JQuery implements the method of hiding layer text links when the mouse passes
 
  
JQuery allows you to move the mouse over a link to control the slide, expand, and hide of an image.