前端超简单炫酷好玩Div换衣服小案例（HTML+CSS+jQuery）

耀南.

已于 2023-07-22 16:28:27 修改

阅读量4.3k

点赞数 3

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 html css

于 2023-07-10 15:13:05 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/131639482

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 8 订阅

订阅专栏

效果：

图片：

http://127.0.0.1:5500/div1.pnghttp://127.0.0.1:5500/div1.png

http://127.0.0.1:5500/div2.pnghttp://127.0.0.1:5500/div2.png

http://127.0.0.1:5500/div3.pnghttp://127.0.0.1:5500/div3.png

http://127.0.0.1:5500/div3while.pnghttp://127.0.0.1:5500/div3while.png

点击右下角衣服图片可以切换成想要的样式....

HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>DIY切换衣服图案</title>
    <link rel="stylesheet" href="./clothing.css">
</head>

<body>
    <div class="container">
        <!-- 图片盒子 -->
        <div class="shirt">
            <!-- 本体 -->
            <img src="div3while.png" alt="">
            <!-- 覆盖层  -->
                <div class="shirt-overlay">
                    <!--  覆盖层图案  -->
                    <div class="shirt-overlay-pattern"></div>
                    <img src="code/111/images/t_shirt_overlay.png" alt="">
                </div>
        </div>
        <!-- 四个小盒子的box -->
        <div class="options">
            <!-- 第一个盒子 -->
            <div class="option active"></div>
            <!-- 第二个盒子 -->
            <div class="option">
                <img src="./div1.png" alt="">
            </div>
            <div class="option">
                <img src="./div2.png" alt="">
            </div>
            <div class="option">
                <img src="./div3.png" alt="">
            </div>
            <div class="option">
                <img src="./微信图片_20230428085916.jpg" alt="">
            </div>
        </div>
    </div>
    <script src="./jquery-1.8.3.min.js"></script>
<script src="./clothing.js"></script>
</body> 

</html>

CSS代码：

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100vh === height：100% 占据整个窗口*/
    /* 设置元素的最小高度 元素可以比指定值高 不能低于 */
    /* 可以使所有盒子撑满整个屏幕  和屏幕高度一致*/
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #404749;
}
.container{
    /* 相对定位 */
    position: relative;
}
/* T恤本体盒子 */
.shirt{
    position: relative;
    height: 80vh;
    /* vh是高的%   vw 是宽的%  相对于视图*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.shirt img{
    height: 100%;    
    /* 高度撑满本体*/
}
/* 覆盖层 */
.shirt-overlay{
    /* 绝对定位  相对于所有衣服的盒子  重叠在一起 不占用空间*/
    position: absolute;
    width: 100%;
    height: 100%;
}
.shirt-overlay img{
    height: 100%; 
    /* 设置混合模式为正片叠底 */
    /* 设置样式, 会把所有白色的部分转换成半透明的 png */
    /* csdn */
    mix-blend-mode: multiply;
}
/* 覆盖层图案 */
.shirt-overlay-pattern{
    position: absolute;
    width: 100%;
    height: 100%;
    /* csdn */
    /* 设置元素上遮罩层的图像 */
    /* 原始图片只显示遮罩图片非透明的部分 */
    /* 面具 图片  给元素带上一个面具 */
    mask-image: url(./div2black.png);
    /* 渐变遮罩 */
    /* 与xxx.png重叠部分会显示，xxx.png透明部分则隐藏 */
    -webkit-mask-image: url(./div2black.png);
    /* 掩码图像的大小 保持图像纵横比 */
    /* 属性的作用是设置使用遮罩效果的图像 */
    mask-size: contain;
    /* cantain 包含 */
    -webkit-mask-size: contain;
}
/* 图案选项 四个盒子的box */
.options{
    position: absolute;
    bottom: 0;
    right: -100px;
}
.option{
    width: 50px;
    height: 50px;
    border-radius: 5px;
    border: 3px solid #fff;
    background-color: #e2e2e2;
    margin-top: 10px;
    /* 鼠标经过一只手 */
    cursor: pointer;
    /* 过渡 边框慢 */
    transition: 0.3s;
}
.option img{
    width: 100%;
    height: 100%;
}
/* 伪类 选中态 */
/* .active 鼠标点击以后边框颜色变为col  保持不变的 */
/* 一般使用 active伪类选择器 和 ：hover配合组合使用，
实现按钮鼠标悬停和被点击时的不同样式  */
.option.active{
    border-color: #ff6b81;
}
/* 鼠标移入 */
.option:hover{
    border-color: #ff6b81;
}

JS代码：

//为所有图案选项绑定点击事件的监听器，当点击某个选项时，执行以下操作
//on（）事件绑定 在选定的元素上绑定一个或多个事件处理函数
$(".option").on("click",function(){
    // 全部选项移除active样式
    $(".option").removeClass("active");
    //为当前选项添加 active 样式，以便显示选中态
    //addclass增加样式、用于动态增加class类名
    $(this).addClass("active");
    //获取当前选项下的图片地址，以便判断是否需要显示覆盖层图案
    //find命令用来在指定目录下查找文件
    //.attr设置被选元素的属性和值
    let pattern=$(this).find("img").attr("src");
    if(!pattern){
        // 没有图案 覆盖层渐隐
        // 动画渐变 fadeout 该淡出方法通常与 fadeIn() 淡入方法一起使用
        $(".shirt-overlay").fadeOut();
    }else{
        // 有图案 先把覆盖层隐藏
        $(".shirt-overlay").css("display","none");
        // 设置覆盖层图案
        //将覆盖层图案设置为当前选项下的图片
        $(".shirt-overlay-pattern").css("background-image","url("+pattern+")");
        // 覆盖层渐显
        //将覆盖层渐显，即将其透明度从 0 逐渐增加到 1，直到完全可见
        // .fadin用于淡入已隐藏的元素  （里还可以+slow 缓慢的 fast快速的 毫秒）
        $(".shirt-overlay").fadeIn();
    }
})