javascript - 在 FireFox 中使用 big 3 + jquery 在页面顶部显示图像？

Question

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

经过搜索，似乎有很多插件支持这个——但也有很多我不需要的其他功能和开销(图库、支持视频、缩略图等)

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

谢谢。

(请注意*:这是内部产品，因此存在这些要求和限制。)

Answer 1

Is it possible to just bring a single image ontop with basic JavaScript, CSS, HTML and jQuery, specifically in FireFox?

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

1. 创建一个覆盖 div。这个 div 会使整个页面模糊或变暗。在下面的示例中，它会使您的屏幕变暗(因为它更简单)。
2. 创建一个将附加到覆盖 div 的 div，并将包含您要显示的图像。在下面的演示中，这个 div 将比叠加层 更轻，实际上宽度和高度的一半是屏幕的一半。
3. 将更大的图像附加到您的 image-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% 的插件效果那么漂亮，但这可能是一个开始。

希望对您有所帮助。干杯