介绍
利用jq的DOM操作,点击上方的小图片,使其显示到下方大图片区域。大概思路为将被点击的小图片路径赋值给大图片路径。比较核心的是jq代码,利用js也能轻松实现。
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style>
.box {
margin: 100px auto;
border: 2px solid black;
box-shadow: 5px 5px 5px #666666;
width: 1200px;
text-indent: 2em;
background-color: cornsilk;
overflow: hidden;
position: relative;
height: 1000px;
}
.small {
display: flex;
justify-content: space-around;
float: left;
}
.small > img {
margin-left: 10px;
}
.big > img {
margin: 50px 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/*translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.。
当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。*/
}
img:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<h1>相册</h1>
<div class="small">
<img src="wallhaven-2eglj6.jpg" alt="" width="288" height="162">
<img src="wallhaven-6kvrkl.png" alt="" width="288" height="162">
<img src="wallhaven-139z5g.jpg" alt="" width="288" height="162">
<img src="wallhaven-ymy1q7.jpg" alt="" width="288" height="162">
</div>
<div class="big">
<img src="wallhaven-2eglj6.jpg" alt="" width="960" height="540">
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script>
$('.small img').click(function () {
var url = $(this).attr('src')
$('.big img').attr('src', url)
})
</script>
</html>