CSS代码：
.popup-bigic {
position: absolute;
left:;
top:;
background: #eee;
overflow: hidden;
z-index:;
}
.popup-bigic .loading-bigic {
position: absolute;
left: 50%;
top: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
margin-top: -12px;
}
.popup-bigic .img-bigic {
position: absolute;
}
.option-bigic {
position: absolute;
right: 20px;
top: 20px;
z-index:;
}
.option-bigic span {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 20px;
text-indent: -999px;
overflow: hidden;
cursor: pointer;
border-radius: 5px;
background-image: url(../images/icons.png);
background-repeat: no-repeat;
background-color: #fff;
opacity: .5;
}
.option-bigic span:hover {
opacity:;
}
.option-bigic span.change-bigic {
display: none;
background-position: -52px 3px;
}
.option-bigic span.max-bigic {
display: none;
background-position: -119px 3px;
}
.option-bigic span.close-bigic {
background-position: 8px 8px;
}
JS代码：
/**
* jQuery Plugin bigic v1.0.0
/*
*/
(function ($) {
$.fn.bigic = function () { /*
* 构造函数 @Bigic
* 定义基础变量，初始化对象事件
*/
function Bigic($obj){
this.$win = $(window);
this.$obj = $obj;
this.$popup,
this.$img,
this.nWinWid = 0;
this.nWinHei = 0;
this.nImgWid = 0;
this.nImgHei = 0;
this.nImgRate = 0;
this.sImgStatus;
this.sImgSrc,
this.bMoveX = true,
this.bMoveY = true; this.init();
} /*
* 初始化 绑定基础事件
*/
Bigic.prototype.init = function(){
var oThis = this,
timer = null; // 为图片绑定点击事件
this.$obj.off('.bigic').on('click.bigic', function(){
var sTagName = this.tagName.toLowerCase();
if(sTagName == 'img'){
// 更新基础变量
oThis.sImgSrc = this.getAttribute('src');
oThis.sImgStatus = 'min';
// 显示弹窗
oThis.show();
}else{
alert('非IMG标签');
}
}); // 浏览器缩放
this.$win.off('.bigic').on('resize.bigic', function(){
clearTimeout(timer);
timer = setTimeout(function(){
oThis.zoom();
}, 30);
});
} /*
* 弹窗初始化
*/
Bigic.prototype.show = function(){
var oThis = this,
oImg = new Image(); oThis.popup(); // 显示弹窗 // 图片加载
oImg.onload = function(){
oThis.nImgWid = this.width;
oThis.nImgHei = this.height;
oThis.nImgRate = oThis.nImgWid/oThis.nImgHei; $('#LoadingBigic').remove();
oThis.$popup.append('<img id="imgBigic" class="img-bigic" src="'+ oThis.sImgSrc +'" />');
oThis.$img = $('#imgBigic'); oThis.zoom();
}
oImg.src = oThis.sImgSrc;
} /*
* 弹窗显示 及相关控件事件绑定
*/
Bigic.prototype.popup = function(){
var sHtml = '',
oThis = this;
// 生成HTML 选中DOM节点
sHtml += '<div id="popupBigic" class="popup-bigic" style="width:'+ this.nWinWid +'px;height:'+ this.nWinHei +'px;">'
+ '<div class="option-bigic">'
+ '<span id="changeBigic" class="change-bigic min-bigic" state-bigic="min">放大</span>'
+ '<span id="closeBigic" class="close-bigic">关闭</span>'
+ '</div>'
+ '<img id="LoadingBigic" class="loading-bigic" src="preloader.gif" />'
+ '</div>';
$('body').append(sHtml);
oThis.$popup = $('#popupBigic'); // 事件绑定 - 关闭弹窗
$('#closeBigic').off().on('click',function(){
oThis.$popup.remove();
}); // 事件绑定 - 切换尺寸
$('#changeBigic').off().on('click',function(){
if(!document.getElementById('imgBigic')) return;
if($(this).hasClass('min-bigic')){
oThis.sImgStatus = 'max';
$(this).removeClass('min-bigic').addClass('max-bigic').html('缩小');
}else{
oThis.sImgStatus = 'min';
$(this).removeClass('max-bigic').addClass('min-bigic').html('放大');;
}
oThis.zoom();
});
} /*
* 图片放大缩小控制函数
*/
Bigic.prototype.zoom = function(){
var nWid = 0,cnHei = 0,
nLeft = 0, nTop = 0,
nMal = 0, nMat = 0; // 弹窗未打开 或 非img 返回
if(!document.getElementById('popupBigic') || !this.nImgWid) return; this.nWinWid = this.$win.width();
this.nWinHei = this.$win.height();
this.bMoveX = true;
this.bMoveY = true; // 显示隐藏放大缩小按钮
if(this.nImgWid > this.nWinWid || this.nImgHei > this.nWinHei){
$('#changeBigic')[0].style.display = 'inline-block';
}else{
$('#changeBigic')[0].style.display = 'none';
} if(this.sImgStatus == 'min'){
nWid = this.nImgWid > this.nWinWid ? this.nWinWid : this.nImgWid;
nHei = nWid / this.nImgRate; if(nHei > this.nWinHei) nHei = this.nWinHei;
nWid = nHei*this.nImgRate; this.$img.css({'width': nWid +'px', 'height': nHei +'px', 'left': '50%', 'top': '50%', 'margin-top': -nHei/2+'px', 'margin-left': -nWid/2+'px'});
this.$popup.css({'width': this.nWinWid +'px', 'height': this.nWinHei+'px'});
this.move(false);
}else{
if(this.nImgWid < this.nWinWid){
nLeft = '50%'
nMal = this.nImgWid / 2;
this.bMoveX = false;
}
if(this.nImgHei < this.nWinHei){
nTop = '50%'
nMat = this.nImgHei / 2;
this.bMoveY = false;
}
this.$img.css({'width': this.nImgWid +'px', 'height': this.nImgHei+'px', 'left': nLeft, 'top': nTop, 'margin-top': -nMat +'px', 'margin-left': -nMal +'px'});
this.$popup.css({'width': this.nWinWid +'px', 'height': this.nWinHei+'px'});
this.move(true);
}
} /*
* 图片移动事件
*/
Bigic.prototype.move = function(bln){
var _x, _y, _winW, _winH,
_move = false,
_boxW = this.nImgWid,
_boxH = this.nImgHei,
oThis = this; if(!oThis.$img) return;
// 解除绑定
if(!bln){
oThis.$img.off('.bigic');
$(document).off('.bigic');
return;
} // 弹窗移动
oThis.$img.off('.bigic').on({
'click.bigic': function(e){
e.preventDefault();
},
'mousedown.bigic': function(e){
e.preventDefault();
_move=true;
_x=e.pageX-parseInt(oThis.$img.css("left"));
_y=e.pageY-parseInt(oThis.$img.css("top"));
_winW = oThis.nWinWid;
_winH = oThis.nWinHei;
oThis.$img.css('cursor','move');
}
});
$(document).off('.bigic').on({
'mousemove.bigic': function(e){
e.preventDefault();
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
if(x > 0) x = 0;
if(y > 0) y = 0;
if(_winW && x < _winW-_boxW) x = _winW - _boxW;
if(_winH && y < _winH-_boxH) y = _winH - _boxH;
if(oThis.bMoveX) oThis.$img[0].style.left = x +'px';
if(oThis.bMoveY) oThis.$img[0].style.top = y +'px';
}
},
'mouseup.bigic': function(){
_move=false;
oThis.$img.css('cursor','default');
}
});
} /*
* 实例化
*/
new Bigic($(this));
};
})(jQuery);
<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
HTML代码：
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery实现点击小图弹出大图 </title> <link href="css/style.css" rel="stylesheet" type="text/css"/> <style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
body img {
width: 300px;
height: 200px;
}
</style> </head>
<body> <div style="width:960px; margin:0 auto">
<h1>jQuery bigic Plugin Demo</h1>
<img class="test" src="photo/1.jpg" alt="">
<img class="test" src="photo/2.jpg" alt="">
<img class="test" src="photo/3.jpg" alt="">
</div> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquey-bigic.js"></script>
<script type="text/javascript">
$(function(){
$('img').bigic();
});
</script> </body>
</html>
案例下载：Demo