Question

我想重现您在浏览此页面上的图片时获得的效果http://pixabay.com/en/photos/?order=best

如果你继续使用鼠标，会出现一个带有边框的窗口，其中包含更大的图片任何提示都会真正令人沮丧！

Answer 1

提示：fancybox

http://fancybox.net/

你需要了解javascript和jquery。

Answer 2

这可能是您需要的： http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

参见＆＃34;示例2：图像预览库＆＃34; （http://cssglobe.com/lab/tooltip/02/）

您还可以搜索＆＃34;缩略图悬停弹出＆＃34;。

Answer 3

有很多方法。但让我来看看这个特定网站如何实现它。

检查网页的源代码，对于每个图像，HTML如下：

<div class="item" data-w="270" data-h="180">
  <a href="/en/pine-forest-branch-road-conifer-463469/">
    <img src="/static/uploads/photo/2014/09/27/13/36/pine-463469__180.jpg" class="preview_img" data-url="/static/uploads/photo/2014/09/27/13/36/pine-463469_640.jpg" data-width="492.307692308" data-height="327.692307692" alt="Pine, Forest, Branch, Road, Conifer" title="Pine, Forest, Branch, Road, Conifer">
    <em>Pine, Forest, Branch, Road, Conifer</em>
  </a>
</div>

在这里，您可以看到，它们首先显示较小的图片，即/static/uploads/photo/2014/09/27/13/36/pine-463469__180.jpg，较大的图片存储在data标记的<a>属性中，即{{ 1}}。通过这种方式，您可以先加载小图像以节省带宽。

其类data-url="/static/uploads/photo/2014/09/27/13/36/pine-463469_640.jpg"用于选择所有预览图像。您可以看到其功能如下。他们使用的javascript文件是preview_img，这是一个http://pixabay.com/static/js/base6.min.js文件。但仍然可以搜索min来查找代码生成效果：

preview_img

因此，您可以看到他们将事件var hover_timeout, no_preview=getCookie("no_preview"); $(document).on("mouseenter", ".preview_img", function(e) { var o=$(this), i=e.pageX, n=e.pageY; if(!no_preview || null != o.data("force-preview")) { var r = o.attr("title"); r && (o.data("title",r), o.attr("title","")), hover_timeout = setTimeout(function() { var e=o.data("width"), r=o.data("height"), a=r, s=o.data("cut"), c=o.data("title"); if(s&&(a+=s),!(e+30>ww||r+30>wh||e+30>wh||r+30>ww)) { preview = $('<div class="open_preview_img" style="z-index:'+(max_zindex+10)+ '"><div style="position:relative;overflow:hidden;width:'+(e+2)+"px;height:"+(r+2)+ 'px"><img style="width:'+e+"px;height:"+a+'px" src="'+o.attr("src")+'"><img style="width:'+e+'px" src="'+o.data("url")+'"></div>'+(c?"<em>"+c+"</em>":"")+"</div>").prependTo("body"); ...委托给所有具有类mouseenter的图像。然后填充HTML代码和preview_img。并且您可以看到图片的.prependTo("body")属性为src，这是较大图片的网址。

这里的大多数代码是计算大图像的位置/大小信息。根据您的应用程序，您可以自定义。

有人知道如何在这个页面上重现这种悬停效果吗？

3 个答案: