本文共 850 字，大约阅读时间需要 2 分钟。

我们先看一个比较简单的（用jQuery实现） 

示例图：

点击中间图片后... 

 代码

html：

css：

.middle-mid {	width: 56%;	height: 78%;	z-index: 5;}.middle-mid img {	width: 100%;	height: 100%;}.toggle {	position: fixed;	top: 0;	left: 0;	width: 100%;	height: 100%;	background-color: rgba(0,0,0,.6);	z-index: 20000;	display: none;}.toggle .timg {	position: fixed;	top:6%;	left: 18%;	width: 64%;	height: 88%;	z-index: 1001;	display: none;}.toggle .timg img {	width: 100%;	height: 100%;}

js：

//点击显示蒙层，点击图片放大$(".middle-mid img").click(function(){    $("#totop-img").hide();    $(".toggle").show();    $(".toggle .timg").fadeIn(600);    $("html").css("overflow","hidden");//防止页面滑动});$(".toggle").click(function(){    $(".toggle .timg").css("display","none");    $(".toggle").hide();    $("html").css("overflow","");});

一个效果比较好的，这个是转别人的

连接：

示例图：

点击图片后......

完整代码：

转载地址：http://bzwci.baihongyu.com/