[英]How to zoom an image with smooth transition in image gallery?
我想創建一個具有與此相似的縮放效果的圖像庫。 當鼠標懸停在圖像上時,它將顯示該圖像的較大版本以及一些其他標記。
標記:
<div class="gallery">
<div class="gallery-item">
<img src="image.png" width="150" alt="" />
<div class="gallery-item-full">
<img src="image.png" width="250" alt="" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
</div>
.
.
.
</div>
CSS:
.gallery {
margin: 100px auto;
width: 600px;
}
.gallery-item {
float: left;
position: relative;
margin: 0 25px;
width: 150px;
}
.gallery-item-full {
z-index: 999;
position: absolute;
background: #fff;
border: #ccc 1px solid;
padding: 5px;
top: -50px;
left: -50px;
opacity: 0;
}
.gallery-item:hover .gallery-item-full {
opacity: 1;
}
這可行,但是我想要一個平滑的過渡,就像在上一個Gallery中一樣 。 我願意使用Javascript / jQuery。
謝謝。
試試這個: http : //jsfiddle.net/FPKAP/12/ (有點不同,但是我最近為某人做了)
希望它能滿足您的需求:)
碼
$('#zoomimg').mouseenter(function() {
$(this).css("cursor","pointer");
$(this).animate({width: "50%", height: "50%"}, 'slow');
});
$('#zoomimg').mouseleave(function() {
$(this).animate({width: "28%"}, 'slow');
});
碼
$('#zoomimg').hover(function() {
$(this).css("cursor", "pointer").animate({
width: "50%",
height: "50%"
}, 'slow');
}, function() {
$(this).animate({
width: "28%"
}, 'slow');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.