Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 16:52:40
Original
1248 people have browsed it

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;
}



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template