Question

jquery点小图弹出大图，怎样显示图片实际尺寸？

网上下了很多，弹出大图都是根据窗口高度等比缩放后的，看不了实际尺寸原图，求个点击弹出实际尺寸原图的

Answer 1

1、首先你要先准备好small.jpg、big.jpg小图和大图；

2、然后加载jquery文件；

3、开始写效果代码。

效果代码如下：

------------------html代码------------------------

<p><img class='small_img' src='small.jpg' /></p>
<p>图片实际尺寸大小：<span id="small_size"></span></p>
<div id='big_div' style="display:none;"><!-- 弹出层 -->
    <p id="close">X</p>
    <p><img class="big_img" src='big.jpg' /></p>
    <p>图片实际尺寸大小：<span id="big_size"></span></p>
</div>

Jquery代码：

<script src="jquery文件路径"></script>
<script>
$(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.css({  //这里半透明样式我就不写了
            'position' : 'fixed',
            'left' : '0',
            'top' : '0',
            'background' : '#eee'
        });
        big_size.text(big_str);
    });
    
    $('#close').click(function(){
        big_div.hide();
    });
});
</script>

Answer 2

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // imgSrc为图片地址
}

如果你的浏览器支持HTML5, 你还可以用以下代码。

var h = document.querySelector('img').naturalHeight;
var w = document.querySelector('img').naturalWidth;

Answer 3

如果显示原图，那岂不是很简单（Demo见附件）

追问

恩恩，看到了，谢谢，能不能提供个多图的呢，放大以后可以上一页下一页的，我想做图集。

或者把我下载的改下可以显示原尺寸（Q是137858115）
麻烦您了

追答

效果已做了出来，大概的思路都有了，你看下，补充下细节。

Answer 4

不设置width和heigth就是实际大小，或者都设置为100%