jQuery realizes the effect of large picture preview when the mouse passes over the picture_jquery

jQuery: It is a client-side technology. The reason for its birth is: write less, do more (write less code, do more things).

Therefore, we can use jQuery to achieve some Very cool effect, compared to javaScript, the same effect, but very simple code. The core knowledge point in jQuery is the use of selectors. I will summarize the content of selectors in a subsequent blog. I hope everyone will read it. Learning the selector is equivalent to fully mastering jQuery.

This blog post is about how to use jQuery to implement what we see commonly in shopping websites: when the mouse passes over the image number, the image will be enlarged for a large preview. Next, I will paste the main code: first, the code in $(function(){})

Copy code code As follows:

var x = 5;
var y = 15;
$("table tr td img").mousemove(function(e) {
$(" #imageTip").attr("src", this.src)//Set the path of the prompt image
.css({
"top" : (e.pageY y) "px",
" left" : (e.pageX (function(){
$("#imageTip").hide();//Hide picture

});


Next page layout code:

Copy code

The code is as follows: < ;tr>

< td>


< ;tr id="1">

Options	Poster	Name
	Yang Mi
	< img src="images/xiao02.jpg" alt="">	Lin Xiao
		Gong Ming

type="checkbox" id= "checkAll">Select all id="btnDel" type="button" value="Delete">

Here you only need to pay attention to the writing of the last line of code on the left. The above is just the layout of the table.

Next is the css:

Copy the code

The code is as follows: 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;
}