jquery mouse Hover link popup Follow picture instance code _javascript tips

This article describes a more commonly used effect, that is, when the mouse over the link, you can follow the mouse pointer to move the layer, in practical applications, usually for some of the links of text or pictures, and so on, the following is a code example:

<! DOCTYPE html>  

Effect Chart:

The above code to achieve our requirements, the following a brief introduction to the implementation process:
code Comments:
1.this.screenshotpreview=function () {},Declare a function to achieve the following effect, in this effect, this is actually can be omitted, it points to window.
2.xoffset=10,Declares a variable that is used to specify the horizontal distance of the mouse pointer from the pop-up picture.
3.yoffset=30,Declares a variable that is used to specify the vertical distance of the mouse pointer from the pop-up picture.
4.$ ("A.screenshot"). Hover (function (e) {},function (e) {}),Specify the function to be executed when the mouse is moved to the link and away from the link.
5.this.t = This.title,Assign the value of the title property of the link to the T property, where this is a linked object that points to the current mouse hover.
6.var C = (this.t!= "")? <br/> "+ this.t:" ",If THIS.T is not empty, that is, if there is a Title attribute value, insert a newline character and concatenate the current header content, otherwise set C to null.
7.$ ("Body"). Append ("<p id= ' screenshot ' >Add pictures and related instructions to the body.
8.$ ("#screenshot"). CSS ("Top", (E.pagey-xoffset) + "px")-CSS ("left", (E.pagex+yoffset) + "px"). FadeIn ("Fast"), Sets the top and left property values for the P element, and displays the fade effect.
9.THIS.TITLE=THIS.T,The title content assigned to This.title, in fact, do not have any problem, a bit superfluous.
10.$ ("#screenshot"). Remove (),Remove the P element.
11.$ ("A.screenshot"). MouseMove (function (e) {}),Used to set the picture to follow when the mouse pointer moves.
12.$ ("#screenshot"). CSS ("Top", (E.pagey-xoffset) + "px")-CSS ("left", (E.pagex+yoffset) + "px"),Sets the top and left property values of the P element to achieve the following effect.

The above is the entire content of this article, I hope to help you learn.