先上代码(学习):

<div sytle="width:100%">闲散运维。本站接受捐赠 ( ̄﹁ ̄)</div>
<div style="float:right"><img class="donate" src="../img/donate.png" title="捐赠右手博客-二维码"></div>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="../img/ewm.png" />
</div>
</div>
<script src="../include/lib/js/jquery/jquery-1.7.1.js">
</script>
<script>
//图片点击事件
$(".donate").click(function () {
var _this = $(this);//将当前的图片元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
function imgShow(outerdiv,innerdiv,bigimg,_this){
//获得当前图片的src属性
var src=_this.attr("src");
//将当前的图片路径赋值给bigimg,如果不是同一张图片,请将下面一行代码删除
$(bigimg).attr("src",src);
//获取当前点击图片的真实大小,并显示弹出层及大图
$("<img/>").attr("src",src).load(function(){
var windowW=$(window).width();//获取当前窗口的宽度    
var windowH=$(window).height();//获取当前窗口的高度
var realWidth=this.width;//获取图片的真实宽度
var realHeight=this.height;//获取图片真实高度
var imgWidth ,imgHeight;//缩放后的宽和高
var scale=6;//缩放尺寸
imgWidth=realWidth*scale;
imgHeight=realHeight;
$(bigimg).css("width",imgWidth)//以最终的宽度对图片缩放
var w=(windowW-imgWidth)/2;//计算图片与窗口左边距
var h=(windowH-imgHeight)/3;//计算图片与窗口上边距
$(innerdiv).css({"top":h,"left":w});//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及图片
});
$(outerdiv).click(function(){//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}    
</script>

下面是我博客右上角公告中捐赠按钮的点击图片放大效果,按钮和放大后的图片不一样,代码也有所改动。

<div sytle="width:100%">闲散运维。本站接受捐赠 ( ̄﹁ ̄)</div><div style="float:right"><img class="donate" src="../img/donate.png" title="捐赠右手博客-二维码"></div>

<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="../img/ewm.png" />
</div>
</div>
<script src="../include/lib/js/jquery/jquery-1.7.1.js">
</script>
 <script>
//图片点击事件
$(".donate").click(function () {
var _this = $(this);
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
function imgShow(outerdiv,innerdiv,bigimg,_this){
var src=_this.attr("src");
$("<img/>").attr("src",src).load(function(){
var windowW=$(window).width();
var windowH=$(window).height();
var realWidth=this.width;
var realHeight=this.height;
var imgWidth ,imgHeight;
var scale=6;
imgWidth=realWidth*scale;
imgHeight=realHeight;
$(bigimg).css("width",imgWidth)
var w=(windowW-imgWidth)/2;
var h=(windowH-imgHeight)/3;
$(innerdiv).css({"top":h,"left":w});
$(outerdiv).fadeIn("fast");
});
$(outerdiv).click(function(){
$(this).fadeOut("fast");
});
}    
 </script>

图片点击放大效果请看博客右侧上方公告,点击捐赠按钮,图片放大。

点击下方图片进行测试 ↓