jquery實現圖片放大功能
阿新 • • 發佈：2019-02-04
最近做的一個專案中需要圖片放大的功能，所需要的jquery元件在百度雲盤裡邊連結：http://pan.baidu.com/s/1dEKZQ29 密碼：fyl8，也可以自己下載最新版的。
然後需要新增一個css檔案，內容如下：
*{ margin:0; padding:0; list-style:none;} #content{ width:500px; height:170px; margin:100px auto;} #imgbox-loading {position: absolute;top: 0;left: 0; cursor: pointer;display: none;z-index: 90;} #imgbox-loading div {background: #FFF;width: 100%;height : 100%;} #imgbox-overlay {position: absolute;top: 0; left: 0;width: 100%;height: 100%;background: #000;display: none;z-index: 80;} .imgbox-wrap {position: absolute;top: 0;left: 0;background: #FFF;display: none; z-index: 90;} .imgbox-img {padding: 0;margin: 0;border: none;width: 100%; height: 100%;vertical-align: top;} .imgbox-title { padding-top: 10px;font-size: 11px;text-align: center;font-family: Arial;color: #333;display: none;} .imgbox-bg-wrap {position: absolute;padding: 0;margin: 0;display: none;} .imgbox-bg {position: absolute;width: 20px; height: 20px;}
主頁面內容如下，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery點選圖片放大效果</title> <link href="assets/css/imagebox.css" type="text/css" rel="stylesheet" /> </head> <body> <!-- 程式碼 開始 --> <div id="content"> <a id="example1" href="assets/images/4006876523_289a8296ee.jpg"><img src="assets/images/4006876523_289a8296ee_m.jpg" /></a> <a id="example2" href="assets/images/3793633099_3e1e53e4ac_o.jpg"><img src="assets/images/3793633099_4f9c3e08b3_m.jpg" /></a> </div> <script src="js/jquery.min.js"></script> <!-- <script src="js/jquery-1.11.3.min.js"></script> --> <script src="js/jquery.imgbox.pack.js"></script> <script> $(function(){ alert("AAAAAAAA"); $("#example1").imgbox(); $("#example2").imgbox({ 'speedIn' : 0, 'speedOut' : 0, 'alignment' : 'center', 'overlayShow' : true, 'allowMultiple' : false }); }); </script> <!-- 程式碼 結束 --> </body> </html>
但是，這個方法與我所想要的效果有一些不一樣，這種效果只能顯示一次，也就是說函式執行一次就不再執行了，而我的是在一個<c:forEach>迴圈中的，需要能夠放大多張圖片，查了一下資料，發現進行以下修改可以使用，
<script> $(document).ready(function(){ // $(function(){ $("#example1").imgbox(); $('td a').imgbox({ 'speedIn' : 0, 'speedOut' : 0, 'alignment' : 'center', 'overlayShow' : true, 'allowMultiple' : false }); }); </script>
對應的程式碼為：
<td class="t-tr-td"><a id="example2" href="${item.imgUrl}"><img src="${item.imgUrl}" width="100" height="80"/></a></td>