İki jqery yöntemi, görüntüye kaydırma önizleme fonksiyonunu uygular

Küçük · Yayınlandı 19.08.2015 21:21:57

Çizimler yukarıdaki gibidir:

Fare görüntünün üzerinde kaydırdığında odak kazanır, büyük bir görüntü stili oluşturur ve fareyle birlikte hareket eder

Fare ayrıldığında, büyük resmi otomatik olarak yok eder, iki yöntem önerilir, ikincisi önerilir ve sonunda bir demo eklenir.

Yöntem 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>

Kopya kodu

Yöntem 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>

Kopya kodu

demo.rar (300.11 KB, İndirme sayısı: 0)

[Jırlama] İki jqery yöntemi, görüntüye kaydırma önizleme fonksiyonunu uygular

İlgili Yazılar