jquery implementation when the mouse passes through the number of pictures

  We can use jquery to achieve some cool effects, this article for you to introduce the implementation of jquery through the number of pictures, the picture will be enlarged to preview large map, the need for friends can refer to the following

JQuery: It's a client-side technology, and the reason it's born is: Write Less,do more (write less code, do more) .    So, we can use jquery to achieve some cool effects, The same effect, but very simple code, compared to JavaScript. jquery's core knowledge point is the use of selectors, the contents of the selector I will be in the blog after the summary, I hope everyone to see, learn the choice of my device, the equivalent of fully mastered jquery.     This blog post is the implementation of how to achieve through jquery we are common in the shopping site: When the mouse passed the number of pictures, the picture will be enlarged to preview the larger picture. Next I'll paste the main code. HA: The code     code in the $ (function () {}) is as follows: var x = 5;  var y = 15;  $ ("Table tr td img"). MouseMove (f Unction (e) {  $ ("#imageTip"). attr ("src", THIS.SRC)/set hint picture path  . css ({  "Top": (E.pagey + y) + "px",  ' Left ': (E.pagex + x) + "px"  }). Show (3000);//Display picture    });  $ ("Table tr td img"). Mouseout (function () {   $ ("#imageTip"). Hide ()//Hidden picture    });    Next page layout code:    code as follows: <table border= "1px" >  <tr>  <th> options </th>  <th> poster </th>  <th> name </th>   </tr>  <tr id= "0" >  <td><input type= "checkbox" id= "Checkbox1" value= "0" >< /td>  <tD><img src= "images/xiao01.jpg" alt= "" ></td>  <td> Yang </td>  </tr>  <tr id= "1" >  <td><input type= "checkbox" id= "Checkbox2" value= "1" ></td>  <td> <img src= "images/xiao02.jpg" alt= "" ></td>  <td> Lin Yu </td>  </tr>  <tr Id= "0" >  <td><input type= "checkbox" id= "Checkbox3" value= "2" ></td>  <td>< IMG src= "images/xiao03.jpg" alt= "" ></td>  <td> Gong </td>  </tr>  </table >  <table>  <tr>  <td style= "text-align:left;height:20px" ><span>< input  type= "checkbox" id= "Checkall" > select all </span> <span><input  id= "Btndel" type= "button" value= "Delete" > </span>  </td>    </tr>    </table>  <img alt= "" "Src=" Images/xiao01.jpg "class=" clsimg "id=" Imagetip ">    Here everyone just pay attention to the leftThe wording of the line code. The above is just the layout of the table.     Next is css:    code as follows: Body {  font-size:12px; }    TABLE tr TD img {  border : soild 1px #666;  width:240px;  height:240px;  padding:3px;  cursor:hand; }    C Lsimg {  position:absolute;  border:1px #ccc solid;  width:400px;  height:400px;  display:no ne; }