用CSS防Lightbox實現點擊小圖無刷新顯示大圖代碼
代碼簡介：
CSS的“Lightbox”是一個人見人愛的圖片顯示技術，她可以實現點擊小圖無刷新顯示大圖的功能。Discuz論壇就有這種功能，不過好像它還用有JS，這一款沒有用到JS，完全用純CSS實現，而且用起來非常方便。注意，圖片的邊框和大小這個根據你的網頁布局自己設置一下，這里只是演示一下，不一定正好適合你的網頁。
代碼內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title>用CSS防Lightbox實現點擊小圖無刷新顯示大圖代碼 - www.webdm.cn</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: white; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 46%; height: 50%; padding: 13px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } .codefans_net{ width:420px;height:210px;background-color:#efefef;color:#666;border-width:1px;border-color:#999;border-style:solid;margin:6px;padding:6px;font-Size:14px;line-height:200%;float:midden; }</style> </head> <body> <p class="codefans_net">CSS的“Lightbox”是一個人見人愛的圖片顯示技術，可以實現點擊小圖無刷新顯示大圖的功能，如果你不是太理解這種效果，你可以點擊下邊的圖片就會明白了！<br><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img border="0" src="http://www.webdm.cn/images/20091006/demoimgsmall.jpg" width="100" height="62"></a> <div id="light" class="white_content"><a target="_blank" href="/"><img border="0" src="http://www.webdm.cn/images/20091006/demoimg.jpg" width="350" height="216"></a> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">關閉</a></div> <div id="fade" class="black_overlay"></div></p></body> </html><br /><p><a href="http://www.webdm.cn">網頁代碼站</a> - 最專業的網頁代碼下載！</p>總結
以上所述是小編給大家介紹的用CSS防Lightbox實現點擊小圖無刷新顯示大圖代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
