jQuery悬停图像效果

我正在使用jquery进行悬停图像预览效果。用户悬停在缩略图上，并显示更大的版本。对于正在预览的图像，我有不同的宽度/高度。它现在所做的是将图像显示在缩略图的右侧/底部。我想要它做的是显示在图像的左侧/顶部，但由于图像尺寸不同，如果我使用静态尺寸（也就是当前代码中的偏移量），光标和图像之间会存在不需要的空间。我希望脚本获取每个图像的图像高度/宽度，并根据这些属性的内容动态显示。任何帮助是极大的赞赏。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(); 
});

来源

2013-11-04 Ktown

我做了一个小提琴... http://fiddle.jshell.net/VM4sv/ – user2896540

我想使用的位置是：相对于;为更大的图像和使用，使其左上角一点点。

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

这对你有用吗？

来源

2013-11-04 22:13:27 stuthemoo

jQuery悬停图像效果

回答

相关问题