本文使用jquery框架的方法，快速实现图片预览功能
一、附上优美的效果图
二、全部代码以及介绍
-
使用jquery方法操作dom(2d变化)
-
在主图片的样式加上transtion:1s,使2d变化更舒适
-
阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bigBox{
300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.bigBox img{
position: absolute;
100%;
height: 100%;
transition: 1s;
}
.list{
height: 50px;
fit-content;
margin: 0 auto;
}
.list li{
float: left;
50px;
height: 50px;
margin: 0 10px;
list-style: none;
}
.list li img{
100%;
height: 100%;
}
.active{
border: 2px #000 solid;
}
</style>
</head>
<body>
<div class="bigBox">
<img src="./images/1.jpg" alt="">
</div>
<div class="list">
<li class="active">
<img src="./images/1.jpg" alt="">
</li>
<li>
<img src="./images/2.jpg" alt="">
</li>
<li>
<img src="./images/3.jpg" alt="">
</li>
<li>
<img src="./images/4.jpg" alt="">
</li>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$('.bigBox img').click(function(e){
e.stopPropagation();
$('.bigBox img').css({
'transform':'translateY(100px) scale(2)',
})
})
$(document).click(function(){
$('.bigBox img').css({
'transform':' scale(1)',
})
})
$('.list').click(function(e){
var t = e.target;
if(t.nodeName=='IMG'){
$('.bigBox img').attr('src',$(t).attr('src'));
$(t).parent().addClass('active');
$(t).parent().siblings().removeClass('active');
}
})
</script>
</html>