JQuery mouse over the image preview effect

JQuery is a client-side technology that was born for the following reasons: write less,do more.

Therefore, we can use jQuery to achieve some cool effects, compared to javaScript, the same effect, but very simple code. The core knowledge in jQuery is the use of the selector, the content of the selector will be summarized in the following blog, I hope you go to see, learn the selector, equivalent to a complete grasp of jQuery.

This blog post is an example of how jQuery is used to implement what we see in shopping sites: when the mouse passes over the number of images, the image will be zoomed in for a larger preview. Next I'll paste the main code: the first is the code in $(function(){})

 
var x = 5; 
var y = 15; 
$("table tr td img").mousemove(function(e) { 
$("#imageTip").attr("src", this.src)//Set the path to the prompt image
.css({ 
"top" : (e.pageY + y) + "px", 
"left" : (e.pageX + x) + "px" 
}).show(3000);//Display images

}); 
$("table tr td img").mouseout(function(){ 
$("#imageTip").hide();//Hidden pictures

}); 

Next, the page layout code:

 
<table border="1px"> 
<tr> 
<th> options </th> 
<th> posters </th> 
<th> The name of the </th> 
</tr> 
<tr id="0"> 
<td><input type="checkbox" id="Checkbox1" value="0"></td> 
<td><img src="images/xiao01.jpg" alt=""></td> 
<td> Yang mi </td> 
</tr> 
<tr id="1"> 
<td><input type="checkbox" id="Checkbox2" value="1"></td> 
<td><img src="images/xiao02.jpg" alt=""></td> 
<td> Xiao Lin </td> 
</tr> 
<tr id="0"> 
<td><input type="checkbox" id="Checkbox3" value="2"></td> 
<td><img src="images/xiao03.jpg" alt=""></td> 
<td> Palace � </td> 
</tr> 
</table> 
<table> 
<tr> 
<td style="text-align: left;height: 20px"><span><input 
type="checkbox" id="checkAll"> Future generations </span> <span><input 
id="btnDel" type="button" value=" delete "> </span> 
</td> 

</tr> 

</table> 
<img alt="" src="images/xiao01.jpg" class="clsImg" id="imageTip"> 

Here you just have to pay attention to the way the last line of left code is written. This is just the layout of the table.

Next up is CSS:

 
body { 
font-size: 12px; 
} 

table tr td img { 
border: soild 1px #666; 
width: 240px; 
height: 240px; 
padding: 3px; 
cursor: hand; 
} 

.clsImg { 
position: absolute; 
border: 1px #ccc solid; 
width: 400px; 
height: 400px; 
display: none; 
} 

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/20140410163846.jpeg? 2014310163916 ">