Question

我正在使用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();
});

Answer 1

我会使用position：relative;对于更大的图像，并使用它将它带到左上角。

position: relative;
top: -10px;
left: -10px;

这会对你有用吗？

jQuery悬停图像效果

1 个答案: