Home>
<! Doctype html>
<html>
<head>
<meta charset="gb2312">
<style type="text/css">
body {
 margin:0;
 padding:40px;
 background:#fff;
 font:80%arial, helvetica, sans-serif;
 color:#555;
 line-height:180%;
}
a {
 text-decoration:none;
 color:#f30;
}
p {
 clear:both;
 margin:0;
 padding:.5em 0;
}
img {border:none;}
#screenshot {
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
}
</style>
<script type="text/javascript" src="mytest/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
this.screenshotpreview=function () {
 xoffset=10;
 yoffset=30;
 $("a.screenshot"). hover (function (e) {
 this.t=this.title;
 var c=(this.t!="")?"&br />" + this.t:"";
 $("body"). append ("<p><img src =" "+ this.rel +" "/>" + c+ "</p>");
 $("#screenshot")
 .css ("top", (e.pagey-xoffset) + "px")
 .css ("left", (e.pagex + yoffset) + "px")
 .fadein ("fast");
 }, function () {
 this.title=this.t;
 $("#screenshot"). remove ();
 });
 $("a.screenshot"). mousemove (function (e) {
 $("#screenshot")
 .css ("top", (e.pagey-xoffset) + "px")
 .css ("left", (e.pagex + yoffset) + "px");
 });
};
$(document) .ready (function () {
 screenshotpreview ();
});
</script>
</head>
<body>
<a href="#" rel="mytest/demo/thesmall.jpg">Ant Tribe</a>Welcome
</body>
</html>

Effect picture:

The above code fulfills our requirements,The following briefly introduces the implementation process:

Code comment:

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 attribute value of the link to the t attribute, where this is the link object that points to the current mouse hover.

6.var c=(this.t!="") "<br />" + this.t:"",If this.t is not empty, that is, the value of the title attribute exists, then insert a newline character and connect the current title content,Otherwise, set c to null.

7. $("Body"). Append ("<p><img src =" "+ this.rel +" "/>" + c+ "&/p>"),Add images and related descriptions to the body.

8. $("#Screenshot"). 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 display them with a fade-in effect.

9.this.title=this.t,Assign 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 the top and left attribute values ​​of the p element to achieve the following effect.

  • Previous PHP use array to replace matches in a string one by one
  • Next Example analysis of JavaScript drag, collision, gravity and elastic motion