Deux méthodes jqery implémentent la fonction de balayage vers l’aperçu de l’image

Petite ordure · Publié sur 19/08/2015 21:21:57

Les rendus sont les suivants :

Lorsque la souris glisse sur l’image, elle acquiert la mise au point, génère un style d’image volumineuse, et se déplace avec la souris

Quand la souris s’en va, elle détruit automatiquement la grande image, deux méthodes, la seconde est recommandée, et enfin une démo est jointe.

Méthode 1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<scrip去掉t type="text/javascrip去掉t" src="jquery-1.4.1-vsdoc.js"></scrip去掉t>
<style type="text/css">
<!--
img {
height: 150px;
width: 200px;
border:solid 1px #666666;
}
#divBigImg {
height: 400px;
width: 500px;
border:solid 1px #666666;
position:absolute;
}
#BigImgId {
height: 400px;
width: 500px;
border:solid 1px #666666;
}
li {
float: left;
margin-left:5px;
}
-->
</style>
<scrip去掉t>
$(function(){
$("ul li a").bind("mouseover",function(e){
var x=e.pageX+10;
var y=e.pageY+10;
var herf=$(this).attr("href");
//$("#divBigImg").css("display","block");
$("#divBigImg").css({"display":"block","left":x,"top":y})
$("#divBigImg").attr("src",herf);
}).mousemove(function(e){
var x=e.pageX+10;
var y=e.pageY+10;
var herf=$(this).attr("href");
//$("#divBigImg").css("display","block");
$("#divBigImg").css({"display":"block","left":x,"top":y})
$("#divBigImg").attr("src",herf);
}).mouseout(function(){
$("#divBigImg").css("display","none")
});
});
</scrip去掉t>
<body>
<ul>
<li><a href="Images/1.jpg" class="toolTip" title="LinkTitle1"><img src="Images/1.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/2.jpg" class="toolTip" title="LinkTitle1"><img src="Images/2.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/3.jpg" class="toolTip" title="LinkTitle1"><img src="Images/3.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/4.jpg" class="toolTip" title="LinkTitle1"><img src="Images/4.jpg" alt="ImgAlt1" /></a></li>
</ul>
<img src="Images/1.jpg" alt="ImgAlt1" id="divBigImg" style="display:none;" />
</body>
</html>

Code de copie

Méthode 2 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<scrip去掉t type="text/javascrip去掉t" src="jquery-1.4.1-vsdoc.js"></scrip去掉t>
<style type="text/css">
<!--
img {
height: 150px;
width: 200px;
border:solid 1px #666666;
}
#divBigImg {
height: 400px;
width: 500px;
border:solid 1px #666666;
position:absolute;
}
#BigImgId {
height: 400px;
width: 500px;
border:solid 1px #666666;
}
li {
float: left;
margin-left:5px;
}
-->
</style>
<scrip去掉t>
$(function(){
$("ul li a").bind("mouseover",function(e){
var x=e.pageX+10;
var y=e.pageY+10;
var title=$(this).attr("title");
var herf=$(this).attr("href");
$("body").append("<div id='divBigImg'><img src='"+herf+"' id='BigImgId' />"+title+"</div>");
//$("#divBigImg").css("display","block");
$("#divBigImg").css({"display":"block","left":x,"top":y})
$("#divBigImg").attr("src",herf);
}).mousemove(function(e){
var x=e.pageX+10;
var y=e.pageY+10;
$("#divBigImg").css({"display":"block","left":x,"top":y})
}).mouseout(function(){
$("#divBigImg").remove();
});
});
</scrip去掉t>
<body>
<ul>
<li><a href="Images/1.jpg" class="toolTip" title="LinkTitle1"><img src="Images/1.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/2.jpg" class="toolTip" title="LinkTitle2"><img src="Images/2.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/3.jpg" class="toolTip" title="LinkTitle3"><img src="Images/3.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/4.jpg" class="toolTip" title="LinkTitle4"><img src="Images/4.jpg" alt="ImgAlt1" /></a></li>
</ul>
</body>
</html>

Code de copie

demo.rar (300.11 KB, Nombre de téléchargements: 0)

[Jquery] Deux méthodes jqery implémentent la fonction de balayage vers l’aperçu de l’image

Articles connexes