Question

我的网站设置方式是我有一个缩略图网格，根据用户的屏幕分辨率调整大小，并且还有一个滚动机制。我想要添加的另一个功能是能够点击缩略图并让您点击的图像以完整尺寸显示在屏幕中央（或尽可能接近完整尺寸而不会离开屏幕）黑色透明覆盖层。我知道有插件可用，但我是为了学习和熟悉而试图做自己的插件。

这是我到目前为止所拥有的。

$('a.cell').click(function()    {
        $('<div id = "overlay" />').appendTo('body').fadeIn("slow");
        var src = $('img', this).attr("src");           
    });

此功能用于将叠加应用于整个页面，它可以正常使用，然后从用户单击的缩略图中检索图像的路径。缩略图是'img'标签，它们是'a'标签的子级，具有'cell'类，它们的大小为100x100，'src'是实际图像的路径。我还没有任何单独的缩略图或调整大小/重新采样机制，但这是我计划稍后添加的内容。在这部分之后，我发现自己陷入了下一步要写的东西。图像需要转到页面的中心，淡入并调整大小以使其成为完整大小或尽可能接近而不会在浏览器的边界上运行。我试图实现的另一个重要功能是在屏幕中央放置一个加载动画，直到图像准备好显示，并在不再需要时离开。

Answer 1

由于您想学习如何操作，这是一个相对简单的示例。代码如下，并发布到this pastebin。

注意：该脚本假定缩略图和全尺寸图像相同。如果图像rel属性不同，您可以将其存储在图像$(this).find('img').attr('rel')属性中。然后只需将popupImage src更改为：#overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #000; opacity: 0.8; filter: alpha(opacity=80); } #popupImage { position: absolute; left: -99999px; top: 0; }

CSS

<a class="cell"><img src="http://i47.tinypic.com/2m2c36v.jpg" width="30" /></a>

HTML示例

$(document).ready(function(){
 $('a.cell').click(function(){

  // Add overlay
  $('<div id="overlay" />')
   .hide()
   .appendTo('body')
   .fadeIn('slow');

  // Add image & center
  $('<img id="popupImage" src="' + $(this).find('img').attr('src') + '">').appendTo('body');
  var img = $('#popupImage');
  var imgTop = ($(window).height() - img.height())/2;
  var imgLft = ($(window).width() - img.width())/2;
  img
   .hide()
   .css({ top: imgTop, left: imgLft })
   .fadeIn('slow');

  // Add click functionality to hide everything
  $('#overlay,#popupImage').click(function(){
   $('#overlay,#popupImage').fadeOut('slow',function(){
     $(this).remove();
     $('#overlay').remove();
   });
  })
 });
})

脚本

{{1}}

Answer 2

我相信 lightBox插件应该提供您正在寻找的内容。

Answer 3

@Mike

我认为这是一个偏好问题，因为有一些 ton 类似灯箱的插件。

我个人推荐[http://fancybox.net/ fancybox]只是因为它更轻量级（至少我认为）并做同样的事情。

Answer 4

http://johnpolacek.github.io/imagefill.js/这也是一个不错的选择。不仅是身体，你可以将所有图像集中填充到任何div容器

如何使用jQuery将完整大小的图像添加到网页的中心？

4 个答案: