jquery implements the mouse to slide over small figure to view the method of large image _jquery

The example of this article is about the method of jquery implementing the mouse over small graph to view the larger image. Share to everyone for your reference. The implementation methods are as follows:

1. CSS section:

<style type= "Text/css" >
ul{
  list-style:none;
li{
  Float:left;
  margin-left:10px;
}
img{
  border: #CCCCCC solid 1px;
}
#max {
  position:absolute;
  Display:none; /* Hidden layer */
}
</style>

2. HTML section:

Apple products list:
<ul>
<li><a href= "images/apple_1_bigger.jpg" ></a>
<li><a href=" images/apple_2_bigger.jpg > </a>
<li><a href= "images/apple_3_bigger.jpg" ></a >
<li><a href= "images/apple_4_bigger.jpg" ></a>
</ul>

3. JavaScript section:

<script>
$ (document). Ready (function () {
  //e event object that enables you to get the argument e.pagex-x axis of an event, from the distance from the left side of the browser to the e.pagey-y axis, The distance from the top of the browser 
  $ ("a"). MouseOver (function (e) {
  //mouse Move up to the body to append large diagram elements
    //Large image path: The current connection's HREF attribute value is a large figure path
    var $ IMGSRC = $ (this). attr ("href");
    var $maxImg = "<div id= ' Max ' ></div>";
    Add the element
    $ ("body") to the body. Append ($MAXIMG);
    Sets the top and left coordinates of the layer and animates the layer
    $ ("#max"). CSS ("top", e.pagey+20). CSS ("left", e.pagex+10). Show (' slow '); 
  Mouseout (function () {
  //mouse to remove the layer where the large image is located
    $ ("#max"). Remove ();
  }). MouseMove (function (e) {
  //mouse move changes the coordinates of the layer where the large image is located
    $ ("#max"). CSS ("top", e.pagey+20). CSS ("left", e.pagex+10);
});
</script>

I hope this article will help you with your jquery programming.