点击图片，弹出层查看大图

点击图片，弹出层查看大图

Jquery:

$(document).ready(function(){
var small       = $(\'.small_img\'); //小图
    var big_div     = $(\'#big_div\'); //大图弹出层
    var small_size  = $(\'#small_size\'); //显示小图实际尺寸区域
    var big_size    = $(\'#big_size\'); //显示大图实际尺寸区域
    var smallWidth  = small.width(); //小图宽度
    var smallHeight = small.height(); //小图高度
    var bigWidth     = $(\'.big_img\').width(); //大图宽度
    var bigHeight    = $(\'.big_img\').height(); //大图高度
    var small_str    = smallWidth+\' X \'+smallHeight+\' 像素\';
var big_str      = bigWidth+\' X \'+bigHeight+\' 像素\';
small_size.text(small_str);  //显示小图片实际尺寸
    small.click(function(){ //点击显示大图弹出层
        big_div.show();//也可换做big_div.toggle();去除关闭按钮
big_size.text(big_str);
    });

$(\'#close\').click(function(){
big_div.hide();
    });
});

HTML:

<p><img class=\'small_img\' src=\'img/tutu.png\' /></p>
<div id=\'big_div\' style="display:none;position: relative;"><!-- 弹出层 -->
    <p id="close">X</p>
    <p><img class="big_img" src=\'img/tutu.png\' /></p>
</div>

CSS:

.small_img{
width: 30px;
}
#close{
position: absolute;
left: 10px;
top: -5px;
font-size: 12px;
color: red;
cursor: pointer;
}