1.前言
很多童鞋會在項目中遇到一些上傳圖片，展示圖片的操作，但是圖片呢有大有小，為了頁面的美觀，有時候我們需要將圖片展示成固定寬高度，但是呢，領導就會說，我想看大圖片，怎么辦？想看就看呀，來來來，我教你！
2.詳情
說太多也沒有用，直接貼上代碼。新手小白，可以直接復制代碼到本地運行。需要注意一下幾點
- 將代碼中的jquery.js的庫文件鏈接改成自己的路徑
- 將圖片也改成自己的路徑與相應的圖片
- 好了，直接上代碼，一目了然：
-
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片放大</title> <style> table tr td img{width:60px;} table tr td{text-align:center; padding:5px;} table tr th{background:#ddd; height:36px; } table tr td{border-bottom:1px solid #ddd; border-left:1px solid #ddd; } table tr td:last-child{border-right:1px solid #ddd;} .bg-img{position: fixed;background-color:rgba(190,190,190,0.5);z-index:9999;} .tra-img{text-align:center;position:relative;top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } .zoom-in{ cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: zoom-in; cursor: url(../images/big.cur); } .zoom-out{ cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; cursor: url(../images/small.cur); } </style> </head> <body> <table cellpadding="0" cellspacing="0" width="700"> <thead> <tr> <th>序號</th><th>圖片</th><th>說明</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><img class="zoom-in" src="../images/login-bg1.png" /></td> <td>點擊圖片可放大</td> </tr> <tr> <td>2</td> <td><img class="zoom-in" src="../images/login-bg2.png" /></td> <td>點擊圖片可放大</td> </tr> <tr> <td>2</td> <td><img class="zoom-in" src="../images/login-bg3.png" /></td> <td>點擊圖片可放大</td> </tr> </tbody> </table> <script src="../common/jquery.min.js"></script> <script> //點擊圖片放大 $(document).on("click", "table tr td img", function () { var img_content = $(this).attr("src"); $("body").append( "<div class='bg-img'>" + "<div class='tra-img'>" + "<img src='" + img_content + "' class='zoom-out'>" + "</div></div>" ); //bottom:'0',left:'0';會讓圖片從頁面左下放出現，如果想從左上方出現，將bottom:'0'改成top:'0'; $(".bg-img").animate({ width: "100%", height: "100%", bottom: "0", left: "0", }, "normal") }) //點擊外層區域頁面圖片隱藏 $(document).on("click", ".bg-img", function () { $(this).remove(); }) </script> </body> </html>
3.實現效果
- 圖片展示
2.效果圖
4.總結
大家在瀏覽器中執行的時候，會看到相應的效果，如果是低版本的瀏覽器，包括iE11及以下的瀏覽器，可以自己下載兩個文件就是放大鏡和放小鏡的cur文件。這樣的話用戶體驗會更好！ 如果有更好的方法，請告訴我！