Jquery+CSS实现 图片点击放大 z-index，transform，transition，append()
点击图片后，实现图片选中放大，视觉效果类似浮在所有图片上面
思路
所有图片的hover添加函数，用z-index让图片浮起来。
具体实现
先写好HTML
HTML
<body>
<!-- 用ul-li装载图片 -->
<div class="max">
<ul>
<li>
<a href="#"><img src="img/11.jpg"/></a>
</li>
<li>
<a href="#"><img src="img/12.jpg"/></a>
</li>
<li>
<a href="#"><img src="img/13.jpg"/></a>
</li>
<li>
<a href="#"><img src="img/21.jpg"/></a>
</li>
<li>
<a href="#"><img src="img/22.jpg"/></a>
</li>
<li>
<a href="#"><img src="img/23.jpg"/></a>
</li>
</ul>
</div>
<!-- 图片放大后的div用来装载放大的图片以及右上角关闭窗口的‘按钮’ -->
<div class="show">
<div class="but"></div>
</div>
</body>
CSS样式
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 设置背景为渐变色 */
body{
background: linear-gradient(90deg,#99CCCC,#C5B3E5);
}
/* 设置装载图片的整个大DIV */
.max{
width:70%;
height: 700px;
border: 1px solid yellow;
position: relative;
margin: 0 auto;
}
ul{
position: relative;
margin:20px 0 0 80px;
}
/* 取消li圆点样式，并让图片排成两列 */
li{
list-style: none;
float: left;
margin: 30px 0 0 20px;
}
/* 图片放大后的div,背景颜色应该设置深一点掩盖下面没被选中的图片。z-index应该设置高一点 */
.show{
width: 100%;
height:700px;
background: rgba(220,220,220,0.5);
/*border: 1px solid red;*/
position: absolute;
padding: 180px 0 0 550px;
margin-top: -700px ;
z-index: 999;
display: none;
}
/* 关闭窗口的“按钮”，实则为图片 */
.but{
width:50px ;
height: 30px;
background: url(img/false.jpg) no-repeat;
position: absolute;
/*float: right;*/
/*border: 1px solid red;*/
margin:-140px 0 0 700px;
cursor: pointer;
}
.but:hover{
width:50px ;
height: 30px;
background: url(img/hover.jpg) no-repeat;
}
/* 当图片放大后，应该把position设置为固定（fixed），用transform实现放大效果，transition实现时延 */
.big{
position: fixed;
transform: scale(1.8);
transition: all 1s ease 0s;
}
</style>
JQ
<script type="text/javascript">
$(document).ready(function(){
$(".max li").click(function(){
//获取图片链接
var ph=$(this).html();
//显示最上面一层div
$(".show").css("display","block");
//给最外层的div加图片
$(".show").append(ph);
//给图片加放大效果
setTimeout(function(){
$(".show a").addClass("big");
},60);
//点击“关闭窗口”的“按钮”后，最上层div隐藏
$(".but").click(function(){
$(".show a").empty();
$(".show").css("display","none");
});
});
});
</script>
OK，效果实现了，我们来总结一下知识点吧
z-index
z-index属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
transform
变形
transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transition
过渡
transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。
transition-property 指定过渡效果的class名
transition-duration 效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定过渡效果的转速曲线
transition-delay 定义过渡效果开始的时候
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。