39.手机导航

手机导航

html部分

复制代码
<div class="phone">
    <div class="content">
        <img class="active" src="./static/20180529205331_yhGyf.jpeg" alt="" srcset="">
        <img src="./static/20190214214253_hsjqw.webp" alt="" srcset="">
        <img src="./static/20190908084721_rjhtr.png" alt="" srcset="">
        <img src="./static/20210210111704_cd68b.jpg" alt="" srcset="">
    </div>
    <div class="nav">
        <div class="">
            <i  class="iconfont icon-home-fill active"></i>
        </div>
        <div class="">
            <i class="iconfont icon-calendar-fill"></i>
        </div>
        <div class="">
            <i class="iconfont icon-picture-fill"></i>
        </div>
        <div class="">
            <i class="iconfont icon-camera-fill"></i>
        </div>
    </div>
</div>

css部分

复制代码
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(184, 138, 203);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
img{
    width: 350px;
    height: 550px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    object-fit: cover;
    position: absolute;
    transition: all .5s;
    opacity: 0;
}
img.active{
    opacity: 1;
}

.phone{
    height: 600px;
    width: 350px;
    padding: 2px;
    border-radius: 10px;
    background-color: #fff;
}
.content{
    overflow: hidden;
    height: 550px;
    position: relative;
}
.nav{
    padding: 10px;
    display: flex;
    justify-content: space-around;
}
i{
    font-size: 24px !important;
    color: #777777;
    cursor: pointer;
}
i.active{
    color: #8e44ad !important;
}

js部分

复制代码
// 获取dom
const is = document.querySelectorAll("i")
const imgs = document.querySelectorAll("img")


is.forEach((item, index) => {
    item.addEventListener("click", function () {
        // 如果非活动状态添加活动类
        if (!item.classList.contains("active")) {
            item.classList.add("active")
            imgs[index].classList.add("active")
        }

        // 移除其他元素的活动类
        is.forEach((sub, idx) => {
            if (index != idx) {
                sub.classList.remove("active")
            }
        })
        imgs.forEach((sub, idx) => {
            if (index != idx) {
                sub.classList.remove("active")
            }
        })
    }
    )
})

效果

相关推荐
sunbyte3 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林4 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库6 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端6 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪7 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程7 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常7 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程