前端练习小项目 —— 让图片变得更 “色”

🕗 发布于 2024-10-05 04:54 前端 html css javascript 学习

前言：相信读者在学习完了HTML、CSS和JavaScript之后已经想要迫不及待的想找一个小型的项目来练练手，那么这篇文章就正好能满足你的 “需求”。

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

在开始学习之前，先让我们看一下最终的效果：

——看完了上述效果之后，现在让我们开始制作吧！

1.HTML代码

再开始进行效果制作之前，先让我们将HTML代码的骨架搭建好，以下为其HTML代码：

<body>
    <div class="shell"> <!-- 外部容器，用于包裹内部的盒子 -->
        <div class="box" id="box-a"> <!-- 第一个盒子，ID 为 box-a -->
            <img src="./1.jpg" alt=""> <!-- 图片，src 指向本地的 1.jpg -->
        </div>
        <div class="box" id="box-b"> <!-- 第二个盒子，ID 为 box-b -->
            <img src="./1.jpg" alt=""> <!-- 图片，src 指向本地的 1.jpg -->
        </div>
        <div class="box" id="box-c"> <!-- 第三个盒子，ID 为 box-c -->
            <img src="./1.jpg" alt=""> <!-- 图片，src 指向本地的 1.jpg -->
        </div>
    </div>
</body>

在上述的代码中，我们可以看到：

外部容器：<div class="shell">，用于包裹内部的盒子。

盒子1：<div class="box" id="box-a">，包含一张图片。

盒子2：<div class="box" id="box-b">，同样包含一张图片。

盒子3：<div class="box" id="box-c">，也包含一张图片。

图片来源：每个盒子中的图片均指向本地文件1.jpg。

这样，通过上述的解释之后，我们对其的HTML代码也就进一步加深了。

2.css代码

当我们编写完了HTML代码之后，我们就可以对其进行一些效果上的修饰了！以下为CSS代码：

body {
    background: radial-gradient(circle farthest-side at center bottom,
            crimson, #003087 130%); /* 背景为径向渐变，从鲜红色到深蓝色 */
    overflow: hidden; /* 隐藏超出边界的内容 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐内容 */
    align-items: center; /* 垂直居中对齐内容 */
    height: 100vh; /* 高度为视口高度的 100% */
}

.shell {
    height: 260px; /* 容器高度 */
    width: 500px; /* 容器宽度 */
}

.box {
    filter: grayscale(40%); /* 应用 40% 的灰度滤镜 */
}

.box img {
    position: absolute; /* 绝对定位 */
    opacity: 0.4; /* 图片透明度为 40% */
    margin: auto; /* 自动外边距 */
    width: 100%; /* 图片宽度为 100% */
}

解释：

全屏背景：使用径向渐变，从鲜红色到深蓝色，营造视觉层次感。
居中布局：body 使用弹性布局，使内容在水平和垂直方向上居中。
固定容器：.shell 设置固定的高度（260px）和宽度（500px）。
灰度效果：.box 应用 40% 的灰度滤镜，使内容呈现灰色调。
透明图片：.box img 的透明度设置为 40%，增加柔和视觉效果

通过上述的总理之后，这样我们就对CSS代码有了一定的理解了！

3.JavaScript代码

再编写完了HTML和CSS代码之后，再让我们对其交互的效果进行完善，以下为JavaScript代码：

导入文件：

<!-- 导入jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- 导入动画库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

交互的编写：

<script>
    /* 获取元素 */
    let $body = $("body"), // 获取 body 元素
        $heroA = $("#box-a img"), // 获取盒子 A 中的图片
        $heroB = $("#box-b img"), // 获取盒子 B 中的图片
        $heroC = $("#box-c img"); // 获取盒子 C 中的图片

    // 设置 transformStyle 属性为 'preserve-3d'，使3D效果得以保留
    TweenMax.set($heroA, { transformStyle: 'preserve-3d' });
    TweenMax.set($heroB, { transformStyle: 'preserve-3d' });
    TweenMax.set($heroC, { transformStyle: 'preserve-3d' });

    /* 鼠标移动事件 */
    $body.mousemove(function (e) {
        /* 计算鼠标在页面中的位置 */
        let sxPos = e.pageX / $body.width() * 300 - 50; // 计算鼠标的 X 轴位置
        let syPos = e.pageY / $body.height() * 300 - 50; // 计算鼠标的 Y 轴位置
        console.log("x:" + sxPos + ", y:" + syPos); // 输出鼠标位置

        /* 使用 TweenMax 库设置元素的动画效果 */
        TweenMax.to($heroA, 1, { // 动画到盒子 A
            rotationY: 0.05 * sxPos, rotationX: 0.20 * syPos,
            rotationZ: '-0.1', transformPerspective: 500,
        });
        TweenMax.to($heroB, 1, { // 动画到盒子 B
            rotationY: 0.10 * sxPos,
            rotationX: 0.15 * syPos, rotationZ: 0, transformPerspective: 500,
        });
        TweenMax.to($heroC, 1, { // 动画到盒子 C
            rotationY: 0.15 * sxPos,
            rotationX: 0.10 * syPos, rotationZ: 0.10, transformPerspective: 500,
        });
    });
</script>

这里我们再对上述代码进行解释一下，便于读者的理解：

获取 DOM 元素：

使用 jQuery 获取 body 和每个盒子内的图片元素。

设置 3D 效果：

使用 TweenMax 设置每个图片的 transformStyle 属性为 'preserve-3d'，以保留 3D 效果。

鼠标移动事件：

为 body 添加鼠标移动事件，捕捉鼠标位置。

计算鼠标位置：

根据鼠标在页面中的 X 和 Y 坐标计算出相应的偏移量。

动画效果：

使用 TweenMax.to 方法对每个盒子的图片应用旋转动画，旋转量根据鼠标位置动态变化。

动画持续时间：

每个动画持续 1 秒，添加了透视效果。

希望读者可以根据上述的代码注释和下面的解释对JavaScript样式进行理解！

——至此，我们就完成了这个案例的编写了，最后我们附上全部代码以及最终的效果图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秋刀鱼不做梦</title>
    <link rel="stylesheet" href="./index.css">
    <style>
        body {
            background: radial-gradient(circle farthest-side at center bottom,
                    crimson, #003087 130%);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .shell {
            height: 260px;
            width: 500px;
        }

        .box {
            filter: grayscale(40%);
        }

        .box img {
            position: absolute;
            opacity: 0.4;
            margin: auto;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="shell">
        <div class="box" id="box-a">
            <img src="./1.jpg" alt="">
        </div>
        <div class="box" id="box-b">
            <img src="./1.jpg" alt="">
        </div>
        <div class="box" id="box-c">
            <img src="./1.jpg" alt="">
        </div>
    </div>
</body>


<!-- 导入jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- 导入动画库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

<script>
    /* 获取元素*/
    let $body = $("body"),
        $heroA = $("#box-a img"),
        $heroB = $("#box-b img"),
        $heroC = $("#box-c img");
    // 设置 transformStyle 属性为 'preserve-3d'
    TweenMax.set($heroA, { transformStyle: 'preserve-3d' });
    TweenMax.set($heroB, { transformStyle: 'preserve-3d' });
    TweenMax.set($heroC, { transformStyle: 'preserve-3d' });
    /* 鼠标移动事件 */
    $body.mousemove(function (e) {
        /* 计算鼠标在页面中的位置 */
        let sxPos = e.pageX / $body.width() * 300 - 50;
        let syPos = e.pageY / $body.height() * 300 - 50;
        console.log("x:" + sxPos + ", y:" + syPos);
        /* 使用TweenMax库设置元素的动画效果 */
        TweenMax.to($heroA, 1, {
            rotationY: 0.05 * sxPos, rotationX: 0.20 * syPos,
            rotationZ: '-0.1', transformPerspective: 500,
        });
        TweenMax.to($heroB, 1, {
            rotationY: 0.10 * sxPos,
            rotationX: 0.15 * syPos, rotationZ: 0, transformPerspective: 500,
        });
        TweenMax.to($heroC, 1, {
            rotationY: 0.15 * sxPos,
            rotationX: 0.10 * syPos, rotationZ: 0.10, transformPerspective: 500,
        });
    });
</script>

</html>

效果图：

以上就是本篇文章的全部内容了！！！

原文地址：https://blog.csdn.net/2302_80198073/article/details/142535583

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Linux
下一篇：最新版本SkyWalking【10.1.0】部署

【ubuntu】apt是什么
apt的全称是advanced package tool，简称APT，是一个用于管理软件包的命令行工具。‌ APT提供了统一的接口来安装、更新、升级、删除和搜索软件包，简化了在linux上管理软件包的
阅读更多2024-10-05
Redis数据库与GO完结篇：redis操作总结与GO使用redis
redis操作总结与GO链接，操作redis
阅读更多2024-10-05
【PostgreSQL】实战篇——数据备份和恢复的最佳实践和工具
通过合理使用 PostgreSQL 提供的工具，如pg_dumppg_restore和 PITR，数据库管理员可以有效地保护数据，确保在发生故障时能够快速恢复。了解这些工具的使用和最佳实践，有助于提高
阅读更多2024-10-05
vim 操作
光标移动：用小写英文字母「h」、「j」、「k」、「l」，分别控制光标左、下、上、右移一格。:1,9s/huan/new 第1~9行替换。:%s/dj/huan/ 所有匹配的行替换。
阅读更多2024-10-05
P4240 毒瘤之神的考验
k=47-500 都能过还#define int long long 了！发现上式1-1 上下两边乘gcd(i,j)有。这个时候我们可以把一部分看出一个整体。分析这两个函数，发现f(x) 可以在。2
阅读更多2024-10-05
【JAVA开源】基于Vue和SpringBoot的周边产品销售网站
周边产品销售网站有管理员和用户两个角色。管理员功能有个人中心，用户管理，商品分类管理，商品信息管理，订单评价管理，销售统计管理，系统管理，订单管理等。用户功能有注册登录，个人中心，订单评价，我的收藏，
阅读更多2024-10-05
maven基础知识
去掉某个传递依赖： (断开b里面的xx，对a的传递依赖)
阅读更多2024-10-05
Leetcode 3306. Count of Substrings Containing Every Vowel and K Consonants II
Leetcode 3306. Count of Substrings Containing Every Vowel and K Consonants II
阅读更多2024-10-05
股票交易系统开发，如何打造专属的个人股票交易系统
个人股票交易系统的开发融合多方面知识与技能，涵盖技术分析、资金管理等。通过合理设计与不断优化，能提升交易成功率，帮助投资者在股市中获利。
阅读更多2024-10-05
CUDA与TensorRT学习四：模型部署基础知识、模型部署的几大误区、模型量化、模型剪枝、层融合
## 一、模型部署基础知识## 二、模型部署的几大误区## 三、模型量化## 四、模型剪枝## 五、层融合
阅读更多2024-10-05

前端练习小项目 —— 让图片变得更 “色”

1.HTML代码

2.css代码

3.JavaScript代码

相关文章