<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台导航菜单特效源码</title>
<style type="text/css">
span {
color: inherit;
}
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-icab-box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
* {
outline: 0;
}
a {
text-decoration: none;
cursor: pointer;
}
.nav-main .nav-span .nav-active, .datav-nav .nav-main .nav-span .nav-link:hover {
color: #00baff !important;
}
.nav-main .nav-span .nav-link {
text-decoration: none !important;
display: block;
color: #fff;
width: auto;
min-width: 140px;
line-height: 40px;
font-size: 14px;
text-align: left;
cursor: pointer;
padding: 0 40px;
}
.datav-icon {
display: inline-block;
vertical-align: middle;
}
.datav-font {
font-family: "datav-font" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nav-main .nav-icon {
padding-right: 5px;
font-size: 20px;
}
.nav-main {
z-index: 10;
display: flex;
top: 200px;
position: fixed;
width: 100%;
min-width: 1024px;
}
</style>
</head>
<body style="background: #222;margin:0;padding:0px;">
<div class="nav-main">
<canvas id="canvas-2761" style="position: absolute; z-index: -1; left: 0px;"></canvas>
<span class="nav-span"><a class="nav-link nav-active" aria-current="true" href="javascript:canvasnav._toggle(0);" data-spm-anchor-id="datav.10712463.0.0"><i class="datav-font datav-icon icon-ArtboardCopy9 nav-icon"></i><!-- react-text: 60 -->首页
<!-- /react-text --></a></span><span class="nav-span"><a class="nav-link" aria-current="false" href="javascript:canvasnav._toggle(1);" data-spm-anchor-id="datav.10712463.0.0"><i class="datav-font datav-icon icon-ArtboardCopy10 nav-icon" data-spm-anchor-id="datav.10712463.0.i0.6f053967skiQbA"></i><!-- react-text: 64 -->源码区<!-- /react-text --></a></span><span class="nav-span"><a class="nav-link" aria-current="false" href="javascript:canvasnav._toggle(2);" data-spm-anchor-id="datav.10712463.0.0"><i class="datav-font datav-icon icon-ArtboardCopy12 nav-icon"></i><!-- react-text: 68 -->模板区
<!-- /react-text --></a></span> <span class="nav-span"><a class="nav-link" aria-current="false" href="javascript:canvasnav._toggle(3);" data-spm-anchor-id="datav.10712463.0.0"><i class="datav-font datav-icon icon-ArtboardCopy11 nav-icon"></i><!-- react-text: 72 -->会员中心
<!-- /react-text --></a></span> <span class="nav-span"><a class="nav-link" aria-current="false" href="javascript:canvasnav._toggle(4);" data-spm-anchor-id="datav.10712463.0.0"><i class="datav-font datav-icon icon-ArtboardCopy11 nav-icon"></i>上传源码</a></span> </div>
<script>
var canvasnav = (function () {
var c = Math.min, h = Math.sign, m = Math.max, n = Math.abs, j = .85, k = 10, l = 4;
var opt = {};
opt.currentIndex = 1;
opt.canvas = document.getElementById('canvas-2761');
var calcAVGSpeed = function (a) {
var b = (l * j * a + k * (1 - j) * a) / (k * l * 20);
return b = m(n(b), 2.5) * h(b), b
}
var getCurSpeed = function (a, b) {
var c = n(a) > n(j * b) ? l * opt.avgSpeed : k * opt.avgSpeed;
return c
}
var _calCurve = function (a, b, c, d, e, f) {
//console.log(a + f,b,c-f,d,c,d);
e.bezierCurveTo(a + f, b, c - f, d, c, d)
}
var _initCanvas = function (canvas, width, height) {
var devicePixelRatio = window.devicePixelRatio, canvasObj = canvas.getContext("2d");
canvas.width = width * devicePixelRatio, canvas.height = height * devicePixelRatio, canvas.style.width = width + "px", canvas.style.height = height + "px", canvasObj.scale(devicePixelRatio, devicePixelRatio)
}
var resize = function () {
//resize发生
opt.timer && cancelAnimationFrame(opt.timer);
_calcTabs();
_initCanvas(opt.canvas, opt.width, opt.height), draw(0)
}
var _calcTabs = function () {
var a = document.querySelectorAll(".nav-main .nav-span"), b = [], c = 0;
Array.prototype.forEach.call(a, function (a) {
b.push(c), c += a.offsetWidth
}), b[0] = -20, b.push(c), opt.tabWidthList = b, opt.tabHeight = a[0].offsetHeight + 0, opt.height = opt.tabHeight + 20, opt.width = window.innerWidth
}
var _toggle = function (navindex) {
"undefined" !== typeof navindex && navindex !== opt.currentIndex && opt.tabWidthList && opt.tabWidthList.length && (!opt.animating || navindex !== opt.nextIndex) && (opt.animating = true, opt.distance = opt.tabWidthList[navindex] - opt.tabWidthList[opt.currentIndex], opt.avgSpeed = calcAVGSpeed(opt.distance), opt.curDisX = 0, opt.nextIndex = navindex)
return false;
}
var _createPattern = function (a) {
var b = 140, c = 63, d = 1, e = document.createElement("canvas");
e.width = b, e.height = c, e.style.width = b / d + "px", e.style.height = c / d + "px";
var f = e.getContext("2d");
//缩放 宽高 100%
f.scale(d, d);
f.lineWidth = .4;
for (var g = 3, h = .8, j = 1; 30 > j; j++){
//设置或返回用于笔触的颜色、渐变或模式
f.strokeStyle = "RGBA(22, 120, 160, " + h + ")";
//开始一条路径
f.beginPath();
//把路径移动到画布中的指定点，不创建线条
f.moveTo(0, j * g);
//添加一个新点，然后在画布中创建从该点到最后指定点的线条
f.lineTo(b, j * g);
//绘制已定义的路径
f.stroke();
//创建从当前点回到起始点的路径
f.closePath();
10 < j && (h -= .1);
}
var i = a.getContext("2d").createPattern(e, "repeat-x");
opt.pattern = i, e = null
}
var _drawHightlight = function (a) {
//a = 0
var b = opt.canvas.getContext("2d"), d = .3;
//clearRect 在给定的矩形内清除指定的像素,这里清完了
b.clearRect(0, 0, 2 * opt.width, 2 * opt.height);
b.shadowColor = "rgba(0, 193, 220, 1)";
b.shadowBlur = 5;
b.strokeStyle = "#004CB3";
b.lineWidth = .8;
b.fillStyle = "none";
_draw(b, false);
//这里绘制了外围边框线条
//return false;
var e = b.createLinearGradient(0, 0, opt.width, opt.height), f = a - d;
e.addColorStop(c(1, m(0, 0 + f)), "rgba(0,0,0,0)");
e.addColorStop(c(1, m(0, 0 + f + .1)), "#8ED6FF");
e.addColorStop(c(1, 0 + f + d), "#8ED6FF");
e.addColorStop(c(1, 0 + f + d + .1), "rgba(0,0,0,0)");
e.addColorStop(1, "rgba(0,0,0,0)");
b.lineWidth = 1.5;
b.strokeStyle = e;
b.fillStyle = opt.pattern;
_draw(b, true)
}
var draw = function (a) {
//console.log(a);
_drawHightlight(a);
//return false;
opt.timer = requestAnimationFrame(function () {
//console.log(a);
draw((a + .005) % 1.6)
})
}
var _draw =
模仿阿里云datav后台导航菜单特效.rar
需积分: 0 93 浏览量
2023-10-02
17:29:02
上传
评论
收藏 3KB RAR 举报
模仿阿里云datav后台导航菜单特效.rar （1个子文件） 
hjiaoben52 
index.html 10KB资源评论
码云笔记
- 粉丝: 1w+
- 资源: 5812
最新资源
- sm2.js，前端加密算法，主要方法sm2EncryptPwd
- 人工智能-项目实践-jira-Python Jira library. Development chat
- Python俄罗斯方块Tetris源文件下载
- 基于Java 实现的LFU算法，特别适合新手，带有测试case
- 基于Java实现的LRU算法，特别适合新手，带有测试case
- 人工智能-项目实践-数据结构-冒泡排序、选择排序、快速排序、堆排序、插入排序、希尔排序、归并排序.zip
- 基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)作业
- C++ OnnxRuntime部署yolov8模型
- 人工智能-项目实践-数据结构-冒泡排序；直接插入排序；希尔排序；快速排序；堆排序；归并排序；基数排序.zip
- 人工智能-项目实践-数据结构-二叉树的层序遍历（左-右）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
