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();? ?

?})