jQuery点击图片弹出放大可拖动图片查看

CSS代码：

 1 .popup-bigic {
 2     position: absolute;
 3     left: 0;
 4     top: 0;
 5     background: #eee;
 6     overflow: hidden;
 7     z-index: 999;
 8 }
 9 .popup-bigic .loading-bigic {
10     position: absolute;
11     left: 50%;
12     top: 50%;
13     width: 24px;
14     height: 24px;
15     margin-left: -12px;
16     margin-top: -12px;
17 }
18 .popup-bigic .img-bigic {
19     position: absolute;
20 }
21 .option-bigic {
22     position: absolute;
23     right: 20px;
24     top: 20px;
25     z-index: 1;
26 }
27 .option-bigic span {
28     display: inline-block;
29     width: 40px;
30     height: 40px;
31     margin-right: 20px;
32     text-indent: -999px;
33     overflow: hidden;
34     cursor: pointer;
35     border-radius: 5px;
36     background-image: url(../images/icons.png);
37     background-repeat: no-repeat;
38     background-color: #fff;
39     opacity: .5;
40 }
41 .option-bigic span:hover {
42     opacity: 1;
43 }
44 .option-bigic span.change-bigic {
45     display: none;
46     background-position: -52px 3px;
47 }
48 .option-bigic span.max-bigic {
49     display: none;
50     background-position: -119px 3px;
51 }
52 .option-bigic span.close-bigic {
53     background-position: 8px 8px;
54 }

JS代码：

  1 /**
  2  * jQuery Plugin bigic v1.0.0
  3 /*
  4 */
  5 (function ($) {
  6     $.fn.bigic = function () {
  7 
  8         /*
  9          * 构造函数 @Bigic
 10          * 定义基础变量，初始化对象事件
 11          */
 12         function Bigic($obj){
 13             this.$win = $(window);
 14             this.$obj = $obj;
 15             this.$popup,
 16             this.$img,
 17             this.nWinWid = 0;
 18             this.nWinHei = 0;
 19             this.nImgWid = 0;
 20             this.nImgHei = 0;
 21             this.nImgRate = 0;
 22             this.sImgStatus;
 23             this.sImgSrc,
 24             this.bMoveX = true,
 25             this.bMoveY = true;
 26 
 27             this.init();
 28         }
 29 
 30         /*
 31          * 初始化 绑定基础事件
 32          */
 33         Bigic.prototype.init = function(){
 34             var oThis = this,
 35                 timer = null;
 36 
 37             // 为图片绑定点击事件
 38             this.$obj.off('.bigic').on('click.bigic', function(){
 39                 var sTagName = this.tagName.toLowerCase();
 40                 if(sTagName == 'img'){
 41                     // 更新基础变量
 42                     oThis.sImgSrc = this.getAttribute('src');
 43                     oThis.sImgStatus = 'min';
 44                     // 显示弹窗
 45                     oThis.show();
 46                 }else{
 47                     alert('非IMG标签');
 48                 }
 49             });
 50 
 51             // 浏览器缩放
 52             this.$win.off('.bigic').on('resize.bigic', function(){
 53                 clearTimeout(timer);
 54                 timer = setTimeout(function(){
 55                     oThis.zoom();
 56                 }, 30);
 57             });
 58         }
 59 
 60         /*
 61          * 弹窗初始化
 62          */
 63         Bigic.prototype.show = function(){
 64             var oThis = this,
 65                 oImg = new Image();
 66 
 67             oThis.popup();   // 显示弹窗
 68 
 69             // 图片加载
 70             oImg.onload = function(){
 71                 oThis.nImgWid = this.width;
 72                 oThis.nImgHei = this.height;
 73                 oThis.nImgRate = oThis.nImgWid/oThis.nImgHei;
 74 
 75                 $('#LoadingBigic').remove();
 76                 oThis.$popup.append('<img id="imgBigic" class="img-bigic" src="'+ oThis.sImgSrc +'" />');
 77                 oThis.$img = $('#imgBigic');
 78                 
 79                 oThis.zoom();
 80             }
 81             oImg.src = oThis.sImgSrc;
 82         }
 83 
 84         /*
 85          * 弹窗显示 及相关控件事件绑定
 86          */
 87         Bigic.prototype.popup = function(){
 88             var sHtml = '',
 89                 oThis = this;
 90             // 生成HTML 选中DOM节点
 91             sHtml += '<div id="popupBigic" class="popup-bigic" style="'+ this.nWinWid +'px;height:'+ this.nWinHei +'px;">' 
 92                   +     '<div class="option-bigic">'
 93                   +         '<span id="changeBigic" class="change-bigic min-bigic" state-bigic="min">放大</span>'
 94                   +         '<span id="closeBigic" class="close-bigic">关闭</span>'
 95                   +     '</div>'
 96                   +     '<img id="LoadingBigic" class="loading-bigic" src="preloader.gif" />'
 97                   +  '</div>';
 98             $('body').append(sHtml);
 99             oThis.$popup = $('#popupBigic');
100             
101             // 事件绑定 - 关闭弹窗
102             $('#closeBigic').off().on('click',function(){
103                 oThis.$popup.remove();
104             });
105 
106             // 事件绑定 - 切换尺寸
107             $('#changeBigic').off().on('click',function(){
108                 if(!document.getElementById('imgBigic')) return;
109                 if($(this).hasClass('min-bigic')){
110                     oThis.sImgStatus = 'max';
111                     $(this).removeClass('min-bigic').addClass('max-bigic').html('缩小');
112                 }else{
113                     oThis.sImgStatus = 'min';
114                     $(this).removeClass('max-bigic').addClass('min-bigic').html('放大');;
115                 }
116                 oThis.zoom();
117             });
118         }
119 
120         /*
121          * 图片放大缩小控制函数
122          */
123         Bigic.prototype.zoom = function(){
124             var nWid = 0,cnHei = 0,
125                 nLeft = 0, nTop = 0,
126                 nMal = 0, nMat = 0;
127 
128             // 弹窗未打开 或 非img 返回
129             if(!document.getElementById('popupBigic') || !this.nImgWid) return;
130 
131             this.nWinWid = this.$win.width();
132             this.nWinHei = this.$win.height();
133             this.bMoveX = true;
134             this.bMoveY = true;
135 
136             // 显示隐藏放大缩小按钮
137             if(this.nImgWid > this.nWinWid || this.nImgHei > this.nWinHei){
138                 $('#changeBigic')[0].style.display = 'inline-block';
139             }else{
140                 $('#changeBigic')[0].style.display = 'none';
141             }
142 
143             if(this.sImgStatus == 'min'){
144                 nWid = this.nImgWid > this.nWinWid ? this.nWinWid : this.nImgWid;
145                 nHei = nWid / this.nImgRate;
146 
147                 if(nHei > this.nWinHei) nHei = this.nWinHei;
148                 nWid = nHei*this.nImgRate;
149 
150                 this.$img.css({'width': nWid +'px', 'height': nHei +'px', 'left': '50%', 'top': '50%', 'margin-top': -nHei/2+'px', 'margin-left': -nWid/2+'px'});
151                 this.$popup.css({'width': this.nWinWid +'px', 'height': this.nWinHei+'px'});
152                 this.move(false);
153             }else{
154                 if(this.nImgWid < this.nWinWid){
155                     nLeft = '50%'
156                     nMal = this.nImgWid / 2;
157                     this.bMoveX = false;
158                 }
159                 if(this.nImgHei < this.nWinHei){
160                     nTop = '50%'
161                     nMat = this.nImgHei / 2;
162                     this.bMoveY = false;
163                 }
164                 this.$img.css({'width': this.nImgWid +'px', 'height': this.nImgHei+'px', 'left': nLeft, 'top': nTop, 'margin-top': -nMat +'px', 'margin-left': -nMal +'px'});
165                 this.$popup.css({'width': this.nWinWid +'px', 'height': this.nWinHei+'px'});
166                 this.move(true);
167             }
168         }
169 
170         /*
171          * 图片移动事件
172          */
173         Bigic.prototype.move = function(bln){
174             var _x, _y, _winW, _winH,
175                 _move = false,
176                 _boxW = this.nImgWid,
177                 _boxH = this.nImgHei,
178                 oThis = this;
179 
180                 if(!oThis.$img) return;
181                 // 解除绑定
182                 if(!bln){
183                     oThis.$img.off('.bigic');
184                     $(document).off('.bigic');
185                     return;
186                 }
187 
188                 // 弹窗移动
189                 oThis.$img.off('.bigic').on({
190                     'click.bigic': function(e){
191                             e.preventDefault();
192                         },
193                     'mousedown.bigic': function(e){
194                             e.preventDefault();
195                             _move=true;
196                             _x=e.pageX-parseInt(oThis.$img.css("left"));
197                             _y=e.pageY-parseInt(oThis.$img.css("top"));
198                             _winW = oThis.nWinWid;
199                             _winH = oThis.nWinHei;
200                             oThis.$img.css('cursor','move');
201                         }
202                 });
203                 $(document).off('.bigic').on({
204                     'mousemove.bigic': function(e){
205                             e.preventDefault();
206                             if(_move){
207                                 var x=e.pageX-_x;
208                                 var y=e.pageY-_y;
209                                 if(x > 0) x = 0;
210                                 if(y > 0) y = 0;
211                                 if(_winW && x < _winW-_boxW) x = _winW - _boxW;
212                                 if(_winH && y < _winH-_boxH) y = _winH - _boxH;
213                                 if(oThis.bMoveX) oThis.$img[0].style.left = x +'px';
214                                 if(oThis.bMoveY) oThis.$img[0].style.top = y +'px';
215                             }
216                         },
217                     'mouseup.bigic': function(){
218                             _move=false;
219                             oThis.$img.css('cursor','default');
220                         }
221                 });
222         }
223         
224         /*
225          * 实例化
226          */
227         new Bigic($(this));
228     };
229 })(jQuery);

1 <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>

HTML代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <title>jQuery实现点击小图弹出大图 </title>
 7 
 8 <link href="css/style.css" rel="stylesheet" type="text/css"/>
 9 
10 <style>
11 body {
12     margin: 0;
13     padding: 0;
14     overflow: hidden;
15 }
16 body img {
17     width: 300px;
18     height: 200px;
19 }
20 </style>
21 
22 </head>
23 <body>
24 
25     <div style="960px; margin:0 auto">
26         <h1>jQuery bigic Plugin Demo</h1>
27         <img class="test" src="photo/1.jpg" alt="">
28         <img class="test" src="photo/2.jpg" alt="">
29         <img class="test" src="photo/3.jpg" alt="">
30     </div>
31     
32     <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
33     <script type="text/javascript" src="js/jquey-bigic.js"></script> 
34     <script type="text/javascript">
35     $(function(){
36         $('img').bigic();
37     });
38     </script> 
39 
40 </body>
41 </html>

案例下载：Demo