标签：
点击图放大此图，并且周围有滤镜效果，再点击出现的大图恢复原来状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
#box{
width: 80%;
height: 100%;
margin: 50px auto 0;
}
li{
float: left;
width: 30%;
height: 350px;
margin-left: 3%;
margin-top: 50px;
position: relative;
list-style: none;
}
.b{
width: 100%;
height: 100%;
}
.a{
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align: center;
line-height: 350px;
background: white;
}
.a:hover{
opacity: 0.5;
cursor: pointer;
}
.showBox{
width: 200px;
height: 160px;
border: 1px solid orange;
position: absolute;
left: 50%;
top: 50%;
background: white;
margin-left: -100px;
margin-top: -100px;
-webkit-animation: 1s linear forwards;
display: none;
background-size: 100% 100%;
}
@-webkit-keyframes showing{
0%{}
30%{transform: scaley(3.5);}
100%{transform: scale(3.5);}
}
.blur {
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-ms-filter: blur(6px);
filter: blur(6px);
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<img class="b" src="img/beijing4.jpg"/>
<div class="a">
<img src="img/fangda.gif"/>
</div>
</li>
<li>
<img class="b" src="img/beijing.jpg"/>
<div class="a">
<img src="img/fangda.gif"/>
</div>
</li>
<li>
<img class="b" src="img/beijing2.jpg"/>
<div class="a">
<img src="img/fangda.gif"/>
</div>
</li>
<li>
<img class="b" src="img/beijing3.jpg"/>
<div class="a">
<img src="img/fangda.gif"/>
</div>
</li>
<li>
<img class="b" src="img/beijing4.jpg"/>
<div class="a">
<img src="img/fangda.gif"/>
</div>
</li>
<li>
<img class="b" src="img/beijing.jpg"/>
<div class="a">
<img src="img/fangda.gif"/>
</div>
</li>
</ul>
</div>
<figure class="showBox"></figure>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var liArray = $("#box ul li");
var imgArray = [];
var isDian = true;
for (var i = 0;i < $(".b").length;i++) {
imgArray.push( $(".b").eq(i).attr("src"));
}
$("#box ul li").on("click", function(){
if (isDian) {
var imgNum = liArray.index($(this));
$(".showBox").show(1);
$("#box").addClass("blur");
isDian = false;
$(".showBox").css("-webkit-animation-name","showing");
setTimeout(function(){
$(".showBox").css({
"background":"url(" + imgArray[imgNum] +")",
"backgroundSize":"100% 100%"
});
},1000);
}
});
$(".showBox").on("click", function(){
$(this).css({
"display": "none",
"background": "white"
});
$("#box").removeClass("blur");
isDian = true;
});
</script>
</html>
标签：
原文地址：http://www.cnblogs.com/luckyXcc/p/5736149.html
