Home>

Recently the project encountered a demand.The desired effect is,Hovering your mouse over the thumbnail will show a larger image of the image,And the big picture follows the mouse movement;Or move to the prompt text,Pictures can also be displayed.After some thought,This effect was achieved with the following method,Share it with everyone here.

This section introduces a more commonly used effect.That is when the mouse rolls over the link,A layer that follows the mouse pointer can appear,In practical applications,Generally, some explanatory text or pictures of links, etc.

Let's take a look at the demo map 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>
</head>
<body>
<div>
 <div>
  <h3>Image enlarged jquery plugin demo page</h3>
  <div>
<div>
    </a>
    </a>
    </a>
    </a>
    </a>
   </div>
  </div>
 </div>
</div>
</body>
</html>

The above code fulfills our requirements,What do your friends think?

Next we look at a brief description of how to use:

1. Need to use the href attribute of the a tag. The principle of this jquery plugin is that when the mouse is moved to the thumbnail (or link text), a large image html fragment containing the path pointed by the href is loaded. .So the effect of moving the mouse over the thumbnail to display a larger image.The address of the big picture is the content of the href attribute of the a tag.For example:<a href="xx.jpg">thumbnail</a>If this a tag contains a method to display a larger image,The page will display the picture "xx.jpg" pointed to by href.

2. The method used is:target selector.preview ();For example, the abovethumbnail, you can use $("a"). preview ();This code implements the mouse to "thumbnail "This text link shows the effect of the picture xx.jpg.

3. Only supports pictures in png, gif, jpg, and bmp formats.You can modify the image format types supported by the regular expression extension of the plug-in code.

The following briefly introduces the implementation process:

I. Code comments:

1.this.screenshotpreview=function () {}, declare a function to implement the following effect,In this effect,this can actually be omitted,It points to window.

2.xoffset=10, declare a variable,Used to specify the horizontal distance of the mouse pointer from the pop-up image.

3.yoffset=30, declare a variable,Used to specify the vertical distance of the mouse pointer from the pop-up picture.

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 property value of the link to the t property, where this is the link object pointing to the current mouseover.

6.var c=(this.t!="") "<br />" + this.t:"", if this.t is not empty, that is, there is a title attribute value, then Insert a newline and concatenate the current title content,Otherwise, set c to null.

7. $("Body"). Append ("<p><img src =" "+ this.rel +" "/>" + c+ "&/p>") A description is added to the body.

8. $("#Screenshot"). Css ("top", (e.pagey-xoffset) + "px"). Css ("left", (e.pagex + yoffset) + "px"). Fadein ( "fast"), set the top and left attributes of the p element, and display them with a fade-in effect.

9.this.title=this.t, assign the title content to this.title, in fact, there is no problem without this sentence,A bit redundant.

10. $("#Screenshot"). Remove (), remove the p element.

11. $("A.screenshot"). Mousemove (function (e) {}), used to set when the mouse pointer moves,Pictures can follow.

12. $("#Screenshot"). Css ("top", (e.pagey-xoffset) + "px") .css ("left", (e.pagex + yoffset) + "px"), set p The top and left attribute values ​​of the element can achieve the following effect.

Related reading:

  • Previous IOS-like effect ListView with spring animation
  • Next PHP use array to replace matches in a string one by one