从div中弹出图像

时间:2014-03-24 17:49:38

标签: javascript jquery

如何从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);
});

我该怎么做?

2 个答案:

答案 0 :(得分:0)

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

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

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

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

答案 1 :(得分:0)

你需要做这样的事情:

<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