loupe 提供了一個可以在縮小圖中透過虛擬的放大鏡來瀏覽原圖的套件，避免大剌剌的把寬高可能很大的原圖直接顯示在網頁中而破壞了版面。
套件名稱：loupe
套件版本：N/A
作者網站：http://jdbartlett.com/loupe/
套件網址：N/A
發佈日期：2010-12-14
檔案大小：1.65 KB
檔案下載：jquery.loupe.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 | width(選填) 描述： 放大鏡的寬 預設值： 200 height(選填) 描述： 放大鏡的高 預設值： 150 loupe(選填) 描述： 放大鏡要套用的 class 預設值： 'loupe' |
方法說明：
檢視原始碼 JavaScript
1 2 | // 把指定的元素加上 loupe 放大鏡效果 $(selector).loupe(arg); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.loupe.js"></script> <style type="text/css"> a img { border: none; } a.demo { text-decoration: none; } /* 指定 loupe 區塊要套用的樣式 */ .loupe { background-color: #555; background: rgba(0, 0, 0, 0.25); border: 5px solid rgba(0, 0, 0, 0); cursor: url(blank.png), url(blank.cur), none; } </style> <script type="text/javascript"> $(function(){ // 加上 loupe 效果並指定放大鏡的寬高為 100x75 $('.demo').loupe({ width: 100, height: 75 }); }); </script> <body> <a class="demo" href="img/nikon1_V1_leica35mm_19s.jpg"> <img src="img/nikon1_V1_leica35mm_19s.jpg" width="272" height="182" /> </a> <img class="demo" src="img/nikon1_V1_leica35mm_17s.jpg" width="272" height="182" /> </body> |