js前端特效笔记

xxls(龙帅)

已于 2024-01-17 15:03:44 修改

阅读量386

点赞数 9

文章标签：笔记

于 2023-12-23 21:53:36 首次发布

本文链接：https://blog.csdn.net/m0_73940144/article/details/135175267

版权

tab栏

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tab栏</title>
    <style>
    .tab-bar {
        overflow: hidden;
        background-color: #f1f1f1;
    }

    .tab-bar button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }

    .tab-bar button:hover {
        background-color: #ddd;
    }

    .tab-bar button.active {
        background-color: #ccc;
    }

    .tab-content {
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }
    </style>
</head>
<body>
    <div class="tab-bar">
        <button class="tab-bar-btn active" onclick="openTab(event, 'Tab1')">Tab 1</button>
        <button class="tab-bar-btn" onclick="openTab(event, 'Tab2')">Tab 2</button>
        <button class="tab-bar-btn" onclick="openTab(event, 'Tab3')">Tab 3</button>
        
    </div>

    <div id="Tab1" class="tab-content">
        <p>This is the content for Tab 1.</p >
    </div>

    <div id="Tab2" class="tab-content">
        <p>This is the content for Tab 2.</p >
    </div>

    <div id="Tab3" class="tab-content">
        <p>This is the content for Tab 3.</p >
    </div>

    <script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tab-bar-btn");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    </script>
</body>
</html>

轮播图

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <style>
    /* ----------------------------------------------------------------------------轮播图 */

 /* 设置整体大框架 */
 .overall{
            /* 设置窗口大小 */
            width: 450px;
            height: 250px;
    
            /* 将弹性 <div> 元素的所有项目的居中对齐 */
            align-items: center;
    
            /* 设置图片外边距 左右居中 上方5% */
            margin: 3px auto;        
        }
    
        .content{
            /* 设置相对定位 */
            position: relative;
            height: 400px;
        }
    
        .content ul{
            /* 去除标签<ul><li></li></ul>默认加的样式 */
            list-style-type: none;
        }
    
        .content ul>li{
            width: 300px;
            height: 150px;
    
            /* 设置绝对定位 */
            position: absolute;
    
            /* 设置过度效果 时间为1s */
            transition: 1s;
    
            /* 设置最大透明度 默认一开始图片为透明的 当下面js加载的时候
                第一张图片设置为不透明
            */
            opacity: 0;
        }
        
        /* 设置每个图片的样式 */
        .content ul>li img{    
            /* 设置每一张图片的大小 */
            width: 450px;
            height: 250px;
    
            /* 设置圆角边框 */
            border-radius: 25px;
         
            /* 设置边框样式 */
            border: 5px solid #0e0600;        
        }
    
        /* 设置轮播图下面的小点 */
        .content ol{
            position: relative;
    
            display: grid;
            grid-template-columns: repeat(3, 75px);
            grid-template-rows: auto;
            grid-gap: 1em;
            gap:1em;
            float: right;
            margin-top: 225px;
            list-style: none;
            top: 0;
            left: 0;
        }
    
        .content ol li{
            width: 25px;
            height: 10px;
            font-size: 15px;
            line-height: 20px;
            float: left;
            text-align: center;
            border-radius: 2em;
            border: 5px solid #af9d9d;
        }
    </style>
</head>
<body>
      <!-- 整体框架 -->
      <div class="overall">
        <!-- 内容  -->
        <div class="content">
            <!-- 轮播图片 -->
            <ul>
                <li><img src="/assets/ff.png" alt=""></li>
                <li><img src="/assets/gg.png" alt=""></li>
                <li><img src="/assets/hh.png" alt=""></li>
            </ul>
            <!-- 轮播图的点 -->
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>        
    </div>

    <script>
   // ---------------------------------------------------------------------------------------------------轮播图
 window.onload = function()
    {

    var content = this.document.getElementsByClassName("content")[0];

    var li = content.getElementsByTagName("li");

    function fun(i, j)
    {//转换图片函数，就是把透明度改了一下        
        li[i].style.opacity=1;
        li[j].style.opacity=0;
        li[i + 3].style.backgroundColor = "#ffffff";

        // 把图标改成透明
        li[j + 3].style.backgroundColor = "#00000000";
    }

    // 默认情况下轮播图为第一张
    fun(0, 1);
    var i = 0;
    function auto()
    {
        i ++;
        if(i >= 3)
        {
            i = 0;

            fun(0, 2);
        }
        else
        {
            fun(i, i - 1);
        } 
    }
    // 变化时间
    timer = this.setInterval(auto, 1000);
    content.onmouseover = function () 
    { 
        //鼠标划上去，停止轮播
        clearInterval(timer);
    }

    content.onmouseout = function () 
    { 
        //鼠标划出，继续轮播
        timer = setInterval(auto, 1000); //定时器
    }
    var j = 0;
    for(; j < 3; j++)
    {
        //点击小图标可以换图片
        li[j + 3].index = j;
        // 当点击小图标
        li[j + 3].onclick = function()
        {
            fun(this.index, i)
            i = this.index;
        }
    }
}
    </script>
</body>
</html>

主页面布局

<template>
    <el-container class="layout-container-demo" style="height: 500px">
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '2','3']" router>
            
            <el-sub-menu index="1">
              <template #title>
                <el-icon><message /></el-icon>物联网专业背景
              </template>
              <el-menu-item-group>
                <!-- <template #title>22</template> -->
                <el-menu-item index="/culture/cultureJobprospects">就业前景</el-menu-item>
                
              </el-menu-item-group>
            
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon><message /></el-icon>物联网班级文化
              </template>
              <el-menu-item-group>
                <!-- <template #title>22</template> -->
                <el-menu-item index="/culture/cultureContentmanagement">内容管理</el-menu-item>
                <el-menu-item index="/culture/cultureAddclass">添加班级</el-menu-item>
              </el-menu-item-group>
             
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon><message /></el-icon>个人中心
              </template>
              <el-menu-item-group>
                <!-- <template #title>22</template> -->
                <el-menu-item index="/user/userInfo">基本资料</el-menu-item>
                <el-menu-item index="/user/userAvatar">更换头像</el-menu-item>
              </el-menu-item-group>
             
            </el-sub-menu>

          </el-menu>
        </el-scrollbar>
      </el-aside>


      <el-container style="border: 2px solid rgb(0, 132, 248); height: 645px;">

        <el-header style="font-size: 12px">


          <div style="display: flex;">



            <div  style="border: 2px solid rgb(0, 248, 141); width: 600px;">
            <h2>大学物联网班级文化</h2>
           
          </div>

<div style="border: 2px solid rgb(223, 0, 248); margin-left: 400px;">
  <span>666</span>
</div>

          </div>

        </el-header>
  
        <el-main style="height: 800px;">


          <router-view></router-view>
         
        </el-main>
      </el-container>

    </el-container>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
  import {useRouter} from 'vue-router'
const router = useRouter();


  </script>
  
  <style scoped>
  .layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);

    border: 2px solid rgb(255, 170, 0);

  }
  .layout-container-demo .el-aside {
    height: 645px;
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
    border: 2px solid rgb(223, 248, 0);
  }
  .layout-container-demo .el-menu {
    border-right: none;

    border: 2px solid rgb(43, 0, 255);
  }
  .layout-container-demo .el-main {
    height: 30px;
    padding: 0;


    border: 2px solid rgb(0, 0, 0);
  }
  .layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 800%;
    right: 20px;

    border: 2px solid rgb(0, 0, 0);
  }
  </style>