點擊對應的圖片,就彈出對應的圖片層

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

?})

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1. tab列表折疊效果 html: 能源系統事業部 崗位名稱: 工作地點 崗位名...
    lilyping閱讀 1,886評論 0 1
  • 本書介紹 你是不是對Django的學習感到迷茫?是不是對網上零星的教程感到絕望?是不是苦于沒有可以迅速上手的實例而...
    阡陌3536閱讀 1,332評論 0 0
  • 文/劉墉——摘自《唯奮斗者得功名》 作者簡介:劉墉,知名華人作家、畫家,他的處世散文和溫馨勵志散文都深受華人喜愛,...
    大尉說說閱讀 367評論 0 0
  • 我醒著 又好似睡著了 渾渾噩噩 輾轉反側 耳邊傳來的是這喧囂的欲望 腦海中卻空白的形如白漿 我睜著眼 望著我腦中的...
    淋漓_閱讀 434評論 0 0
  • 當你想要某種東西時,整個宇宙會合力助你實現愿望。 生命中一切都要付出代價。 每天都是一成不變,是因為人們已經失去了...
    毛蟲蟲閱讀 236評論 0 1