1

在此处输入图像描述

选择时，希望将单个图像置于页面的前面或顶部。

搜索后，似乎有很多插件支持这一点 - 但也有很多我不需要的其他功能和开销（图库，支持视频，缩略图等）

是否可以只使用基本的 JavaScript、CSS、HTML 和 jQuery 将单个图像放在顶部，特别是在 FireFox 中？

谢谢你。

（请注意*：这是内部产品，因此有这些要求和限制。）

4

4 回答 4

2

是否可以只使用基本的 JavaScript、CSS、HTML 和 jQuery 将单个图像放在上面，特别是在 FireFox 中？

是的，这是可能的，但插件在大多数情况下是更容易实现的。你想要完成的是类似于light box效果的东西，但我会尝试根据完成你想要做的事情所需的 4 个步骤给出一个简单的解决方案：

  1. 创建一个覆盖 div。这个 div 会使您的整个页面变得模糊或变暗。在下面的示例中，它会使您的屏幕变暗（因为它更简单）。
  2. 创建一个将附加到覆盖 div 并包含您要显示的图像的 div。在下面的演示中，这个 divlighter将比覆盖的 div 更实际，实际上将具有屏幕的一半宽度和一半高度。
  3. 将更大的图像附加到您的图像 div。

  4. 根据图像的alt文本为图像添加字幕。

    $(document).ready(function()
{

    var docWidth = $(document).width();
    var docHeight = $(document).height();

    //First Step" Creating the overlay-div and adding opacity to it
    var overlayDiv = "<div id="overlay-div"></div>"
    $("body").append(overlayDiv);
    $("#overlay-div").css("position","absolute", "top","0","left","0","background-color","#000","opacity","0.5", "width", docWidth + "px", "height",docHeight + "px");

    //Second step: Creating the image-div and centering it on the screen

    $("#overlay-div").append("<div id=\"image-div\"></div>");
    $("#image-div").css("position","absolute", "top",docHeight/4 + "px","left",docWidth/4 + "px","background-color","#FFF", "width", docWidth/2, "height",docHeight);

    //Third step: Creating an image to display inside the image-div and centering it

    $("#image-div").append("<img src=\"path/to/your/image\"id=\"zoomed-img\" alt=\"This is a zoomed image\"/>");
    var imgWidth = $("#image-div").width();
    var imgHeight = $("#image-height").height();

    $("#image-div").css("position","absolute", "top","10px","left","10px");

    //Fourth step: Creating a subtitle from the alt text
    var subtitle = "<p id=\"text-subtitle\">" + $("#image-div").attr("alt") + "</p>";

    $("#image-div").append(subtitle);
    $("#text-subtitle").css("position","absolute", "top",imgHeight + 20 + "px","left","10px");


});

当您的文档准备好时触发此功能，并获取任意图像。但是，通过对上面的代码稍作调整，可以显示由单击触发的不同图像（具有不同的字幕）。

我打算向您展示一个简单的演示，它可以使用几行 jQuery/javascript 代码来创建您想要的。当然，它不如 90% 的插件效果那么漂亮，但这可能是一个开始。

我希望它有所帮助。干杯

于 2012-10-29T20:08:22.137 回答
1

对于一个愚蠢的简单灯箱，我最近一直在利用http://buckwilson.me/lightboxme/。

于 2012-10-29T19:51:57.633 回答
1

尝试引导模式。

JavaScript - 推特引导

GitHub源代码

GitHub bootstrap-modal.js

于 2012-10-29T19:55:38.240 回答
1

这是我制作的一个非常基本的示例。希望很好的学习：

http://jsfiddle.net/v9LTP/2/

$('img').click(function(){  //bind a click event handler to images
    var img = $(this).clone().addClass('modal').appendTo($('#blackout')); //clone the clicked image element and add to the blackout div which gives the dark background.
    $('#blackout > #close').click(function(){ //attach click handler to close button
        $('#blackout').fadeOut(function(){ //fade the blackout div
            img.remove(); //remove the image element we cloned, so we can do it again.
        }); 
    });
    $('#blackout').fadeIn(); //show the blackout div
});

​</p>

于 2012-10-29T20:09:22.793 回答