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