JS效果-燈箱效果-圖片大圖檢視
阿新 • • 發佈：2018-12-16
一個簡單的自己寫的簡陋版“燈箱效果”，不多說看程式碼：（自己找一下圖片，路徑記得改，用到jQuery）嫌js麻煩，主要想試一下實現邏輯。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>燈箱效果</title> <style> body{ margin: 0; } .box img,.box .bigImg span{ cursor: pointer; } .box .bigImg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; } .box .bigImg img{ margin: 200px auto 0; display: block; } .box .bigImg span{ font-size: 30px; font-weight: 700; position: absolute; top: 200px; right: 200px; } </style> <script src="../jquery.js"></script> </head> <body> <div class="box"> <img src="1.jpg" alt="" width="200"> <div class="bigImg"> <img src="1.jpg" width="600"> <span>×</span> </div> <img src="tmall-card-01.png" alt="" width="200"> <div class="bigImg"> <img src="tmall-card-01.png" width="600"> <span>×</span> </div> <img src="tmall-card-02.png" alt="" width="200"> <div class="bigImg"> <img src="tmall-card-02.png" width="600"> <span>×</span> </div> <img src="tmall-eticket.png" alt="" width="200"> <div class="bigImg"> <img src="tmall-eticket.png" width="600"> <span>×</span> </div> <img src="tmall-reserve.png" alt="" width="200"> <div class="bigImg"> <img src="tmall-reserve.png" width="600"> <span>×</span> </div> </div> <script> $(function(){ $(".box img").each(function(){ $(this).click(function(){ $(this).next().show(1000); }); }); $(".bigImg span").each(function(){ $(this).click(function(){ $(this).parent().hide(1000); }); }); }); </script> </body> </html>