源码
<!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 = function (canvasObj, trueorfalse) {
var navindex = opt.currentIndex, tableHeight = opt.tabHeight, f = 0, g = 40, i = 20, j = .5, k = 2.5, l = 0;
if (canvasObj.beginPath(), canvasObj.moveTo(-50, opt.height + 10), canvasObj.lineTo(-50, tableHeight + j), opt.animating) {
var m = getCurSpeed(opt.curDisX, opt.distance);
l = c(n(opt.distance), n(opt.curDisX + m)) * h(m)
}
if (canvasObj.lineTo(f + opt.tabWidthList[navindex] + l - g / 2, tableHeight + j), _calCurve(f + opt.tabWidthList[navindex] + l - g / 2, tableHeight + j, f + opt.tabWidthList[navindex] + l + g / 2, k + j, canvasObj, i), opt.animating) {
var o = opt.tabWidthList[opt.nextIndex + 1] - opt.tabWidthList[opt.nextIndex];
canvasObj.lineTo(f + opt.tabWidthList[navindex] + o + l - g / 2, k + j), _calCurve(f + opt.tabWidthList[navindex] + o + l - g / 2, k + j, f + opt.tabWidthList[navindex] + o + l + g / 2, tableHeight + j, canvasObj, i)
} else {
//lineTO添加一个新点 宽度长度
canvasObj.lineTo(f + opt.tabWidthList[navindex + 1] + l - g / 2, k + j);
_calCurve(f + opt.tabWidthList[navindex + 1] + l - g / 2, k + j, f + opt.tabWidthList[navindex + 1] + l + g / 2, tableHeight + j, canvasObj, i);
}
canvasObj.lineTo(opt.width + 10, tableHeight + j);
canvasObj.lineTo(opt.width + 10, opt.height + 10);
canvasObj.closePath();
canvasObj.stroke();
trueorfalse && canvasObj.fill();
opt.animating && trueorfalse && (opt.curDisX = l, n(l) >= n(opt.distance) && (opt.animating = false, opt.currentIndex = opt.nextIndex))
}
_toggle(1);
_calcTabs();
_initCanvas(opt.canvas, opt.width, opt.height);
_createPattern(opt.canvas);
draw(0);
window.onresize = function () {
resize();
};
return {
"_toggle": _toggle
}
})()
</script>
</body>
</html>
运行效果