Question

如何从div中弹出图像并将其宽度设置为100％（这样它占据了大部分屏幕）？注意：我不想使用任何插件。

到目前为止，我有这个：

<div class="container">
    <img src="thumbnail_image.png" />
</div>

JQuery的：

$(document).on("click", ".container img", function(event) {

     /* Get the image name. */
     var src = $(this).attr('src').split('/');
     var file = src[src.length - 1];

     /* Load the big image into the container to replace the thumbnail. */
     $(this).attr('src', 'big_images/' + file);
});

我该怎么做？

Answer 1

您可以使用固定的CSS位置。所以定义一个这样的类：

.fullscreen_image {
    position: fixed;
    top: 0;
    left: 0
    width: 100%;
}

然后，您可以为您的图片添加和删除此课程。

$(this).addClass( 'fullscreen_image' );

Answer 2

你需要做这样的事情：

<div id="container">
    <img src="http://i.stack.imgur.com/QWQds.jpg?s=128&g=1" class="thumbnail"/>
</div>

和jquery代码：

$('#container img').live('click',function(){

$(this).addClass('zoom');

});

检查DEMO HERE

从div中弹出图像

2 个答案: