jquery implementation of the mouse slide over pop-up magnified image effects _jquery

This chapter describes a more commonly used effect, that is, when the mouse over the link, can appear to follow the mouse pointer to move the layer, in practical applications, is generally for some of the links of text or pictures, etc.

Let's take a look at a demo chart first.

Here is the code example:

<link rel= "stylesheet" href= ". /css/common.css "type=" Text/css "/> <script type=" Text/javascript "src=". /js/jquery-1.2.6.pack.js "></script> <script type=" Text/javascript "src=". /js/jquery.imagepreview.1.0.js "></script> <script type=" Text/javascript "> $ (Function () {$ ()	 
A.preview "). Preview ();
}); </script> <style type= "Text/css" > Html{overflow-y:scroll;} a.preview,a.preview:hover{text-decoration:
none;} A.preview img{margin:20px 10px} </style>  

The code above has fulfilled our requirements, how are the little friends?

Now let's look at a brief description of how to use it:

1. You need to use the href attribute of the A tag, which is based on the principle that when you move the mouse to the thumbnail (or link text), a large image HTML fragment containing the href point path is loaded, which is absolutely positioned according to the mouse position. The result is a mouse move to the thumbnail to show the larger image. The address of the larger image is the content of the href attribute of a label. For example: <a href= "xx.jpg" > Thumbnails </a> if this a tag contains a method to display a larger image, the page will display a picture of "xx.jpg" that the href points to.

2. The method used is: Target selector. Preview (), such as the above <a href= "xx.jpg" > thumbnail </a> you can use $ ("a"). Preview (); This code implements the mouse to the "thumbnail" This text link shows the effect of xx.jpg this picture.

3. Supports only pictures in png,gif,jpg,bmp Four formats, you can modify the type of picture format supported by regular expression extensions for plug-in code.

The following is a brief introduction to the implementation process:

A. Code comments:

1.this.screenshotpreview=function () {}, declares a function to implement 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) {}) stipulates the function to be executed when the mouse is moved to the link and away from the link.

5.THIS.T = This.title, assigns 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 the this.t is not empty, that is, the title attribute value, then insert a line break and connect the current header content, otherwise set C to null.

7.$ ("Body"). Append ("<p id= ' screenshot ' >

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 problems, a bit superfluous.

10.$ ("#screenshot"). Remove (), move the P element.

11.$ ("A.screenshot"). MouseMove (function (e) {}) 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"), set the top and left property values for p elements, can achieve the following effect.

Two. Related reading:

The

1.hover () function can refer to the hover episode chapter of jquery. The
2.append () function can refer to the Append () method section of jquery. The
3.css () function can refer to the section of the CSS () method in jquery. The
4.pageY properties can refer to the Event.pagey Properties section of jquery. The
5.fadeIn () function can refer to the FadeIn () method section of jquery. The
6.remove () function can refer to the section of the Remove () method in jquery.
7.mousemove Events can refer to the MouseMove Events section of jquery.