css+js 选项卡动画效果
选项卡上下左右翻转动画效果
<template><div class="web-box"><div class="topTitle"><div class="topTitle1">标题标题</div></div><div class="info-wrap"><div style="width: 100%;height: 100%;"><div class="system-list" v-if="navList.length>0"><el-carousel :loop="false" indicator-position="none" arrow="always" :autoplay="false"style="width: 100%;height: 100%;"><el-carousel-item class="nav-list-1" v-for="(item,index) in navList" :key="index"><div class="nav-item" :title="b.sysName" v-for="(b,i) in item" :key="i"><div class="change-box" v-if="b.hasAuth"><div class="picBox"><div class="show nav-item-content"><div class="nav-item-left"><img class="sysIcon" :src="imgBaseUrl+b.sysIcon"/></div><div class="nav-item-right"><div class="nav-item-name">{{b.sysName}}</div></div></div><div class="hide"><div class="hide-name">{{b.sysName}}</div><div class="hide-text" @click="clickNav(b)">立即进入 ></div></div></div></div><div class="picBox" v-else><div class="show nav-item-content gray"><div class="nav-item-left"><img class="sysIcon" :src="imgBaseUrl+b.sysIcon"/></div><div class="nav-item-right"><div class="nav-item-name">{{b.sysName}}</div></div></div></div></div></el-carousel-item></el-carousel></div><div class="system-list" v-else><el-empty :image-size="50" description="暂无数据"></el-empty></div></div></div></div>
</template><script>import Swiper from 'swiper'; // 注意引入的是Swiperimport 'swiper/css/swiper.min.css' // 注意这里的引入import $ from 'jquery';import { Index } from '@/components/Active/active'export default {name: "Index",data() {return {title: '',content: '',navList: [],navIndex: 0,nowList: [{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},]};},// 监听属性 类似于data概念computed: {},created() {this.getConfigData();},methods: {//系统应用getConfigData() {let dataList = this.nowList;let nowList = [];let arr = [];//每18个一页,多余的进入下一个for (let i = 0; i < dataList.length; i++) {arr.push(dataList[i]);if (i % 18 === 17 || i === dataList.length - 1) {nowList.push(arr);arr = [];}}this.navList = nowList;setTimeout(() => {new Index($(".system-list .change-box"))this.mySystemSwiper()})},mySystemSwiper() {let mySystemSwiper = new Swiper('.system-list', {slidesPerView: 5,navigation: {nextEl: '.swiper-button-next', // 右按钮prevEl: '.swiper-button-prev', // 左按钮},})},},};
</script><style scoped lang="scss">@import '~@/components/Active/active.css';.web-box {width: 100%;height: calc(100vh - 50px);background: #f4f9ff;box-sizing: border-box;overflow: hidden;display: flex;justify-content: center;flex-wrap: wrap;.topTitle{width: 100%;height: 33vh;background-image: url("../assets/images/index/topbg.png");background-size: 100% 100%;display: flex;align-items: flex-end;justify-content: center;.topTitle1{width: 12.4vw;height: 4.23vh;text-align: center;line-height: 4.23vh;background-image: url("../assets/images/index/titleBg.png");background-size: 100% 100%;font-size: 1.66vh;letter-spacing: 0.09vw;color: #3c4b70;font-weight: bolder;}}.info-wrap {width: 83.07vw;height: 57vh;display: flex;flex-wrap: wrap;justify-content: space-between;background-color: #ffffff;border-radius: 1vh;box-shadow: -5px 5px 10px 0px rgba(86, 113, 207, 0.25);.system-list {margin-top: 2vh;width: 100%;height: calc(100% - 4.54vh);box-sizing: border-box;overflow: hidden;.el-carousel {padding: 0 3.5vw;}.nav-list-1 {width: 100%;height: 100%;display: flex;flex-wrap: wrap;align-content: start;padding-top: 3vh;.nav-item {width: 11.67vw;height: 11.04vh;margin:2vh 0.5vw;cursor: pointer;position: relative;.change-box, .picBox{width: 100%;height: 100%;}.nav-item-content{width: 100%;height: 100%;display: flex;align-items: center;padding: 0 0.5vw;background-size: 100% 100%;}.nav-item-left {width: 4vw;height: 4vw;display: flex;align-items: center;justify-content: center;.sysIcon {width: 3vw;height: 3vw;}}.gray{background-image: url("../assets/images/index/bg2.png") !important;.nav-item-left{filter: grayscale(95%);}.nav-item-right{color: #aeadad;}}.nav-item-right {width: 7vw;height: 100%;display: flex;flex-wrap: wrap;align-items: center;padding: 1vh 0.5vw 1vh 1vw;.nav-item-name {width: 5.5vw;font-size: 1.5vh;font-weight: bolder;}.nav-item-text {width: 4vw;height: 2vh;line-height: 2vh;text-align: center;cursor: pointer;background-color: rgba(255, 255, 255, 0.34);border-radius: 0.8vh;font-size: 1.2vh;}}&:nth-child(2n+1) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+2) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+3) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+4) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+5) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+6) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+7) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+8) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+9) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+10) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+11) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+12) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+13) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+14) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+15) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+16) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+17) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+18) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}}}}}.swiper-button-prev {width: 2.86vw;height: 100%;background: #fff;left: 0;top: 0;margin: 0;color: #5e97ff;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;pointer-events: all !important;opacity: 1 !important;&:before {position: absolute;width: 0.94vw;height: 5.19vh;box-shadow: 0vh 0vh 0.37vh 0vh rgba(81, 103, 91, 0.4);border-radius: 0.37vh;font-size: 1.5vh;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}&.swiper-button-disabled:before {pointer-events: none !important;opacity: 0.4 !important;}&:after {content: "";}}.swiper-button-next {width: 2.86vw;height: 100%;background: #fff;right: 0;top: 0;margin: 0;color: #5e97ff;pointer-events: all !important;opacity: 1 !important;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;&.swiper-button-disabled:before {pointer-events: none !important;opacity: 0.4 !important;}&:before {position: absolute;width: 0.94vw;height: 5.19vh;box-shadow: 0vh 0vh 0.37vh 0vh rgba(81, 103, 91, 0.4);border-radius: 0.37vh;font-size: 1.5vh;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}&:after {content: "";}}.el-carousel::v-deep {.el-carousel__container {height: 100%;}.el-carousel__arrow {width: 28px;height: 72px;border-radius: 3px;background: #f0f2f5;color: rgba(94, 151, 255, 0.86);font-size: 24px;box-shadow: #DDD 0 2px 4px 1px;border: 1px solid #e5e8e7;&.el-carousel__arrow--left {left: -51px;i.el-icon-arrow-left:before {content: "\e792";}}&.el-carousel__arrow--right {right: -51px;i.el-icon-arrow-right:before {content: "\e791";}}}}}
</style>
components-Active文件夹:
1.active.css
.picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vh;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-left .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vw;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-bottom .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vh;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-right .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vw;animation: 500ms ease-out 0ms 1 normal forwards;
}.show,
.hide{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;
}
.hide{color:#fff;/*background-color:#3c4b70;*/text-align:center;transform: translate3d(0,0,-1px);background-image: url("../../assets/images/index/bg1.png");background-repeat: no-repeat;background-size: 100% 100%;display: flex;flex-direction: column;justify-content: center;font-size: 1.6vh;font-weight: bolder;border-radius: 0.8vh;/* 3D空间内移动一个元素的位置 */
}
.hide .hide-name{}
.hide .hide-text{margin: 1vh auto 0;width: 4vw;height: 2vh;line-height: 2vh;text-align: center;cursor: pointer;background-color: rgba(255, 255, 255, 0.25);border-radius: 0.8vh;font-size: 1.2vh;
}.in-top .hide,
.out-top .hide
{transform-origin: 0% 100% !important;transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}
.in-top .picBox{animation-name: in-top;animation-play-state: running;
}
.out-top .picBox{animation-name: out-top;animation-play-state: running;
}
@keyframes in-top {from {transform: rotate3d(0,0,0,0deg)}to {transform: rotate3d(-1,0,0,90deg)}
}@keyframes out-top {from {transform: rotate3d(-1,0,0,90deg)}to {transform: rotate3d(0,0,0,0deg)}
}
.in-right .hide,
.out-right .hide {transform-origin: 0% 0%;transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}
.in-right .picBox{animation-name: in-right;animation-play-state: running;
}
.out-right .picBox{animation-name: out-right;animation-play-state: running;
}
@keyframes in-right {from {transform: rotate3d(0,0,0,0deg)}to {transform: rotate3d(0,-1,0,90deg)}
}@keyframes out-right {from {transform: rotate3d(0,-1,0,90deg)}to {transform: rotate3d(0,0,0,0deg)}
}.in-bottom .hide,
.out-bottom .hide {transform-origin: 0% 0%;transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}
.in-bottom .picBox{animation-name: in-bottom;animation-play-state: running;
}
.out-bottom .picBox{animation-name: out-bottom;animation-play-state: running;
}
@keyframes in-bottom {from {transform: rotate3d(0,0,0,0deg)}to {transform: rotate3d(1,0,0,90deg)}
}
@keyframes out-bottom {from {transform: rotate3d(1,0,0,90deg)}to {transform: rotate3d(0,0,0,0deg)}
}
.in-left .hide,
.out-left .hide {transform-origin: 100% 0;transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
@keyframes in-left {from {transform: rotate3d(0,0,0,0deg)}to {transform: rotate3d(0,1,0,90deg)}
}
@keyframes out-left {from {transform: rotate3d(0,1,0,90deg)}to {transform: rotate3d(0,0,0,0deg)}
}
.in-left .picBox{animation-name: in-left;animation-play-state: running;
}
.out-left .picBox{animation-name: out-left;animation-play-state: running;
}
2.active.js
Index.prototype.init = function () {var self = this;this.nodes = [];Array.prototype.slice.call(self.node, 0).forEach(function (item, index) {self.nodes.push(self.update(item));self.bindEvents(item, index);});
};
Index.prototype.update = function (item) {return {w: item.offsetWidth,h: item.offsetHeight,l: item.offsetLeft,t: item.offsetTop}
};
Index.prototype.bindEvents = function (item, index) {var self = this;item.onmouseenter = function (e) {e.stopPropagation()self.addClass(e, item, 'in', index);return false;}item.onmouseleave = function (e) {self.addClass(e, item, 'out', index);return false;}
};
Index.prototype.addClass = function (e, item, state, index) {var direction = this.getDirection(e, index);var class_suffix = '';var class_durr = '';switch (direction) {case 0:class_suffix = '-top';break;case 1:class_suffix = '-right';break;case 2:class_suffix = '-bottom';break;case 3:class_suffix = '-left';break;}item.className = 'change-box';item.classList.add(class_suffix);item.classList.add(state + class_suffix);
};
Index.prototype.getDirection = function (e, index) {var w = this.nodes[index].w,h = this.nodes[index].h,x = Math.abs(e.offsetX) - w / 2 ,y = Math.abs(e.offsetY) - h / 2 ,w1 = Math.abs(e.offsetX),h1 = Math.abs(e.offsetY),w2 = w - Math.abs(e.offsetX),h2 = h - Math.abs(e.offsetY);// 取到x,y两点坐标let d = 0;if (x <= 0 && y <= 0 && w1 - h1 < 0){d = 3}else if (x <= 0 && y > 0){if (w1 - h2 <= 0){d = 3}else{d = 2}}else if (x > 0 && y <= 0){if (w2 - h1 >= 0){d = 0}else{d = 1}}else if (x > 0 && y > 0){if (w2 - h2 >= 0){d = 2}else{d = 1}}return d;//d的数值用于判断方向上下左右。
};
export function Index(node) {this.node = node;this.init();
}
相关文章:

css+js 选项卡动画效果
选项卡上下左右翻转动画效果 <template><div class"web-box"><div class"topTitle"><div class"topTitle1">标题标题</div></div><div class"info-wrap"><div style"width: 100%;h…...

[C错题本]转义字符/指针与首元素/运算
\a响铃 \b退格 \f换页 \r回车 \t水平制表 \v垂直制表 \单引号 \"双引号 \\反斜杠 \0dd八进制(0-7) \xdd(0-f)注意x一定不能大写 而且十六进制千万不能写\0xint main() {char s[]"ABCD", *p;for (p s 1; p < s 4; p)printf("%s…...

Layui继续学习
1、简单评论区代码: <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>社区评论区</title> <link rel"stylesheet" href"https://cdn.staticfile.org/layui/2.6.8/css/…...

react+datav+echarts实现可视化数据大屏
📓最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把reactdatav的简易版可视化数据大屏供大家做个参考。 📓效果如下 1下载必要的框架 📓 react路由 npm install re…...

CSS新手入门笔记整理:CSS浮动布局
文档流概述 正常文档流 “文档流”指元素在页面中出现的先后顺序。正常文档流,又称为“普通文档流”或“普通流”,也就是W3C标准所说的“normal flow”。正常文档流,将一个页面从上到下分为一行一行,其中块元素独占一行…...
微服务组件Sentinel的学习(1)
Sentinel学习笔记(1) Sentinel基本概念Sentinel功能和设计理念流量控制熔断降级系统负载保护 Sentinel基本概念 资源 资源是Sentinel的关键概念。它可以是 ava应用程序中的任何内容,例如,由应用程序提供的服务,或由应…...

小程序 -网络请求post/get
1.1网络请求的概念(post和get) 1.2步骤 1.3 应用函数 js里面写,用bindtap绑在控件上,就不讲了 实例代码: //发起get数据请求get_info(){wx.request({url:https://www.escook.cn/api/get,//请求的接口地址,必须基于https协议//请求的方式met…...
Elasticsearch 8.10之前同义词最佳实践
1、同义词在搜索引擎领域用途 同义词在搜索引擎领域的用途可概括如下: 增强搜索的准确性——当用户输入一个关键词时,可能与他们实际意图相关的文档使用了一个不同的关键词或短语。同义词允许搜索引擎理解和识别这些情况,返回更准确的结果。如:“遥遥领先”和“华为Meta60…...
芯知识 | 什么是OTP语音芯片?唯创知音WTN6xxx系列:低成本智能语音解决方案
什么是OTP语音芯片? OTP,即一次性可编程(One-Time Programmable),语音芯片是一类具有独特编程特性的嵌入式语音存储解决方案。与可重复擦写(Flash型)语音芯片不同,OTP语音芯片一经烧…...
Linux内核密钥环
Linux内核密钥环(Linux Kernel Keyring)是Linux内核中的一个机制,用于管理和存储各种类型的密钥和安全相关的数据。它是Linux内核提供的一种可编程的安全子系统,用于处理密钥的生成、存储、检索和删除等操作。 Linux内核密钥环的…...

web前端之正弦波浪动功能、repeat、calc
MENU 效果图htmlstylecalcrepeat 效果图 html <div class"grid"><span class"line"></span><span class"line"></span><span class"line"></span><span class"line"><…...
使用工具 NVM来管理不同版本的 Node.js启动vue项目
使用工具如 NVM(Node Version Manager)来管理不同版本的 Node.js。NVM 允许你在同一台计算机上安装和切换不同版本的 Node.js。以下是一些步骤,以便同时在你的系统中安装两个 Node.js 版本: 安装 NVM: 首先,你需要安装…...

Xcode编写基于C++的动态连接库(dylib)且用node-ffi-napi测试
创建一个dylib工程示例 在 Xcode 中创建一个动态链接库(.dylib 文件)的步骤如下: 打开 Xcode: 打开 Xcode 应用程序。 创建新的工程: 选择 "Create a new Xcode project",或者使用菜单 File &g…...

WPF-UI HandyControl 简单介绍
文章目录 前言我的网易云专栏和Gitee仓库HandyControlHandyControl示例相关资源地址 我的运行环境快速开始和Material Design功能对比手风琴右键菜单自动补充滚动条轮播图消息通知步骤条托盘按钮 结尾 前言 最近我在研究如何使用WPF做一个比较完整的项目,然后我就先…...
golang学习笔记——数据结构进阶
文章目录 数据结构进阶mapmap示例sliceinterfaceembedded 数据结构进阶 常见数据结构实现原理 本章主要介绍常见的数据结构,比如channel、slice、map等,通过对其底层实现原理的分析,来加深认识,以此避免一些使用过程中的误区。 …...

TrustZone之总线请求
接下来,我们将查看系统中的总线请求者,如下图所示: 系统中的A型处理器具有TrustZone感知,并在每个总线访问中发送正确的安全状态。然而,大多数现代SoC还包含非处理器总线请求者,例如GPU和DMA控制器。 与完成…...

vue2+Echarts数据可视化 【帕累托图】
接口得到的数据如下 要经过排序 ,计算累计百分比得到数据 蓝色 柱状图数据: 取count字段值 横坐标:取 id值 折线图:根据柱状图的数据计算累计百分比 getInterface(data) {getParetoChart(data).then((res) > {if (res) {thi…...

imazing 2.17.16中文版怎么备份iPhone手机照片
imazing 2.17.16中文版备份功能非常强大,在进行备份之前,需要对其进行设置,才能充分使用备份功能。当移动设备与电脑第一次连接成功后,会询问是否要立即备份,个人的建议是选择“稍后”,小伙伴可以先对软件进…...

05 python数据容器
5.1 数据容器认识 5.2 python列表 5.2.1 列表的定义 演示数据容器之:list 语法:[元素,元素,....] #定义一个列表List List [itheima,uityu,gsdfg] List1 [itheima,6666,True] print(List) print(List1) print(type(List)) pr…...

相机倾斜棋盘格标定全记录 vs200+opencv安装
论文参考是这个 Geiger A, Moosmann F, Car , et al. Automatic camera and range sensor calibration using a single shot[C]//Robotics and Automation (ICRA), 2012 IEEE International Conference on. IEEE, 2012: 3936-3943. 代码是这个github 花了一上午配好了c环境。。…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...

Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

Unity中的transform.up
2025年6月8日,周日下午 在Unity中,transform.up是Transform组件的一个属性,表示游戏对象在世界空间中的“上”方向(Y轴正方向),且会随对象旋转动态变化。以下是关键点解析: 基本定义 transfor…...
FOPLP vs CoWoS
以下是 FOPLP(Fan-out panel-level packaging 扇出型面板级封装)与 CoWoS(Chip on Wafer on Substrate)两种先进封装技术的详细对比分析,涵盖技术原理、性能、成本、应用场景及市场趋势等维度: 一、技术原…...
CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14
什么是 Pattern Matching(模式匹配) ❝ 模式匹配就是一种“描述式”的写法,不需要你手动判断、提取数据,而是直接描述你希望的数据结构是什么样子,系统自动判断并提取。❞ 你给的定义拆解: ✴ Instead of …...

Axure Rp 11 安装、汉化、授权
Axure Rp 11 安装、汉化、授权 1、前言2、汉化2.1、汉化文件下载2.2、windows汉化流程2.3、 macOs汉化流程 3、授权 1、前言 Axure Rp 11官方下载链接:https://www.axure.com/downloadthanks 2、汉化 2.1、汉化文件下载 链接: https://pan.baidu.com/s/18Clf…...

【向量库】Weaviate概述与架构解析
文章目录 一、什么是weaviate二、High-Level Architecture1. Core Components2. Storage Layer3. 组件交互流程 三、核心组件1. API Layer2. Schema Management3. Vector Indexing3.1. 查询原理3.2. 左侧:Search Process(搜索流程)3.3. 右侧&…...