新增第152个小实例：Tab选项卡动画切换效果

2022-05-18 01:16:03 +08:00 · 2022-05-18 01:16:03 +08:00 · 573f1eda2e
parent f220981dba
commit 573f1eda2e
4 changed files with 148 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -158,4 +158,5 @@
 148. HTML5+CSS3+JS小实例：简约的垂直选项卡
 149. HTML5+CSS3+JS小实例：可切换方向的无缝衔接图片滚动效果
 150. HTML5+CSS3+Vue小实例：仿制B站PC端首页的吃豆人轮播图
-151. HTML5+CSS3+JS小实例：倒计时动画特效
+151. HTML5+CSS3+JS小实例：倒计时动画特效
+152. HTML5+CSS3+JS小实例：Tab选项卡动画切换效果
--- a/code/152/152.css
+++ b/code/152/152.css
@ -0,0 +1,83 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.container{
+    border: 1px solid #38ada9;
+}
+/* 标签栏 */
+.nav{
+    display: flex;
+}
+.nav .item{
+    width: 140px;
+    height: 108px;
+    border-right: 1px solid #38ada9;
+    border-bottom: 1px solid #38ada9;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    /* 相对定位 */
+    position: relative;
+    /* 溢出隐藏 */
+    overflow: hidden;
+}
+.nav .item:last-child{
+    border-right: none;
+}
+/* 图标背景圆 */
+.nav .item::before{
+    content: "";
+    width: 80px;
+    height: 80px;
+    background-color: #38ada9;
+    border-radius: 50%;
+    /* 绝对定位 */
+    position: absolute;
+    /* 过渡效果 */
+    transition: 0.3s;
+}
+.nav .fa{
+    color: #fff;
+    position: relative;
+    font-size: 36px;
+}
+/* 标签选中态样式 */
+.nav .item.active::before{
+    width: 150%;
+    height: 150%;
+}
+/* 内容区 */
+.content{
+    width: 100%;
+    height: 300px;
+    position: relative;
+}
+section{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    /* 默认隐藏 */
+    opacity: 0;
+    /* 不透明度改变时的过渡效果 */
+    transition: opacity 0.4s;
+}
+section span{
+    font-size: 80px;
+    font-weight: bold;
+    color: #38ada940;
+}
+/* 内容区选中态样式 */
+section.active{
+    opacity: 1;
+}
--- a/code/152/152.html
+++ b/code/152/152.html
@ -0,0 +1,35 @@
+<!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>Tab选项卡动画切换效果</title>
+    <!-- 引入字体图标库 -->
+    <link rel="stylesheet" href="/fonts/css/font-awesome.css">
+    <link rel="stylesheet" href="152.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="nav">
+            <div class="item active"><i class="fa fa-bicycle"></i></div>
+            <div class="item"><i class="fa fa-motorcycle"></i></div>
+            <div class="item"><i class="fa fa-bus"></i></div>
+            <div class="item"><i class="fa fa-car"></i></div>
+            <div class="item"><i class="fa fa-subway"></i></div>
+        </div>
+        <div class="content">
+            <section class="active"><span>1</span></section>
+            <section><span>2</span></section>
+            <section><span>3</span></section>
+            <section><span>4</span></section>
+            <section><span>5</span></section>
+        </div>
+    </div>
+</body>
+
+</html>
+
+<script src="152.js"></script>
--- a/code/152/152.js
+++ b/code/152/152.js
@ -0,0 +1,28 @@
+// 获取要操作的元素
+const items=document.querySelectorAll('.item');
+const sections=document.querySelectorAll('section');
+
+// 移除选中态
+function removeActive(){
+    // 移除标签选中态样式
+    items.forEach(item=>{
+        item.classList.remove('active');
+    });
+    // 移除内容区选中态样式
+    sections.forEach(item=>{
+        item.classList.remove('active');
+    });
+}
+
+// 遍历所有标签
+items.forEach((item,index)=>{
+    // 为每个标签绑定点击事件
+    item.addEventListener('click',function(){
+        // 移除选中态样式
+        removeActive();
+        // 为当前标签添加选中样式
+        item.classList.add('active');
+        // 为当前内容区添加选中样式
+        sections[index].classList.add('active');
+    })
+})