[英]jQuery hover image effect
我正在使用jquery懸停圖像預覽效果。 用戶將鼠標懸停在縮略圖上,並顯示較大的版本。 對於預覽的圖像,我有不同的寬度/高度。 現在要做的是在縮略圖的右/下顯示圖像。 我想要它做的是顯示在圖像的左/上,但是由於圖像尺寸不同,如果我使用靜態尺寸(也就是當前代碼中的偏移量),則光標和圖像之間會有多余的空間。 我希望腳本獲取每個圖像的圖像高度/寬度,並根據這些屬性動態顯示。 任何幫助是極大的贊賞。
html / css代碼如下:
<ul class="gallery" style="margin-top: 50px;" align="center">
<li><a href="images/lpage-image1.png" class="preview" onclick="return false"><img src="images/lpage-image1-thumb.png" alt="gallery thumbnail" /></a></li>
<li><a href="images/lpage-image2.png" class="preview" onclick="return false"><img src="images/lpage-image2-thumb.png" alt="gallery thumbnail" /></a></li>
<li><a href="images/lpage-image3.png" class="preview" onclick="return false"><img src="images/lpage-image3-thumb.png" alt="gallery thumbnail" /></a></li>
</ul>
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
margin-top: -250px;
float: left;
color:#fff;
}
jQuery的:
this.imagePreview = function () {
/* CONFIG */
xOffset = 80;
yOffset = -400;
var height = 0;
var width = 0;
// these variables determine popup's distance from the cursor
/* END CONFIG */
$("a.preview").hover(function (e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
$("#preview")
.each(
height = $(this).height();
width = $(this).width();)
.css("top", (e.pageY - height) + "px")
.css("left", (e.pageX - width) + "px")
.fadeIn("fast")
},
function () {
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function (e) {
$("#preview")
.css("top", (e.pageY - width) + "px")
.css("left", (e.pageX + height) + "px");
});
};
// starting the script on page load
$(document).ready(function () {
imagePreview();
});
我會使用position:relative; 以獲得更大的圖像,並使用它將其提升到最左上角。
position: relative;
top: -10px;
left: -10px;
那對你有用嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.