Jquery放大鏡插件---imgzoom.js(原創)

時間 2019-12-08

標籤 jquery 放大鏡插件 imgzoom.js imgzoom 原創欄目 JQuery 简体版

原文原文鏈接

Jquery放大鏡插件imgzoom可以實現圖片放大的功能，便於與原圖進行比較。javascript

使用方法：

1.引入jQuery與imgzoom,imgzoom.csscss

1 <link rel="stylesheet" href="css/jquery.imgzoom.css" />
2 <script type="text/javascript" src="src/jquery-1.11.0.js" ></script>
3 <script type="text/javascript" src="dist/bundle.js" ></script>

2.插件調用html

1 $(".main").imgzoom({position:"inner"});

參數說明：

1. position：放大圖片顯示的位置，包括‘inner’,'top','left','right','bottom'。java

2. boxWidth：圖片鎖定區域框的寬度。jquery

3. boxHeight：圖片鎖定區域框的高度。jquery插件

4. borderRadius：圖片鎖定區域框的圓角弧度ide

5. left:當圖片位置不爲inner時候，left有效spa

6. top:當圖片位置不爲inner的時候，left有效插件

具體使用

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>jQuery放大鏡插件imgzoom.js</title>
 6         <meta name="description" content="jQuery放大鏡插件imgzoom.js">
 7         <meta name="keywords" content="放大鏡,圖片放大,jquery插件,imgzoom.js">
 8         <link rel="stylesheet" href="css/jquery.imgzoom.css" />
 9         <script type="text/javascript" src="src/jquery-1.11.0.js" ></script>
10         <script type="text/javascript" src="dist/bundle.js" ></script>
11         <style>
12             .main {
13                 width: 500px;
14                 height: 570px;
15                 border: 2px solid black;
16                 position: relative;
17                 /*overflow: hidden;*/
18             }
19         </style>
20     </head>
21     <body>
22         <div class="main">
23             <img id="img1" src="img/zoom.jpg"  style="width: 100%;height: 100%;"/>
24             
25         </div>
26         <script>
27             $(".main").imgzoom({position:"inner"});
28         </script>
29     </body>
30 </html>