jQuery点击小图弹出大图
分类：实例代码
jQuery点击小图弹出大图属于前端实例代码，有关更多实例代码大家可以查看。
这样的效果在实际应用中比较常见，点击小图可以弹出一个更加醒目的大图。
这里为了掩饰方便使用了一张图片，实际应用应该是一个缩略图和一个完整大图。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
padding: 0;
margin: 0;
}
.smallImg {
max-width: 250px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -125px;
margin-top: -75px;
cursor: pointer;
}
.smallImg img {
display: block;
width: 100%;
height: 100%;
}
.mark {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 10;
display: none;
}
.bigImg {
position: fixed;
top: 50%;
left: 50%;
border-radius: 4px;
}
.animation {
-webkit-animation: bounceIn 1s .2s ease both;
-moz-animation: bounceIn 1s .2s ease both;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
</style>
<script src="/wp-content/uploads/front-end-tutorial/error.html" alt="">
</div>
<div class="mark">
<div class="bigImg">
</div>
</div>
</body>
</html>
jQuery点击小图弹出大图，这样的场景在实际项目中还是用的比较多的，关于jQuery点击小图弹出大图就介绍到这了。