Due metodi jqery implementano la funzione di anteprima swipe-to-image

Piccola feccia · Pubblicato su 19/08/2015 21:21:57

Le rappresentazioni sono le sopra:

Quando il mouse scorre sull'immagine, acquisisce la messa a fuoco, genera uno stile di immagine grande e si muove con il mouse

Quando il mouse se ne va, distruggerà automaticamente l'immagine grande, due metodi, il secondo è consigliato e infine viene aggiunta una demo.

Metodo 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>

Copia codice

Metodo 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>

Copia codice

demo.rar (300.11 KB, Numero di download: 0)

[Jquery] Due metodi jqery implementano la funzione di anteprima swipe-to-image

Post correlati