JQuery实现一个简单的相册

news/2024/7/19 12:54:18 标签: js, jquery

介绍

利用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>