html:

<div class="img">

<img src="小图路径"  original="大图路径"  alt="">

</div>

接受大图的代码：

<div id="imgFrame">

<div class="bg"></div>

<div id="imgbox"></div>

</div>

css:

#imgFrame{

display: none;

}

.bg{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background: #000;

opacity: 0.5;

}

#imgbox{

width: 80%;

position: fixed;

top: 50%;

left: 10%;

z-index: 1000;

}

js:

$(".img img").click(function(){       

           showOriginal(this);    

})   

 function showOriginal(img) {       

             $("#imgFrame").show();        

//getAttribute方法返回指定属性名的属性值。

            document.getElementById("imgbox").innerHTML = "<img src=' " + img.getAttribute("original") + " ' /> ";

  }   

 $(".bg").click(function(){       

        $("#imgFrame").hide();   

 })