-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
107 lines (103 loc) · 4.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image" href="./img/logo.png">
<title>Funny Animation</title>
<style>
:root{--color:#409eff}*{padding:0;margin:0;box-sizing:border-box}
h2{text-align:center;line-height:50px;margin-top:10px}
h2>span{font-size:18px;font-weight:400}.badge{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.badge>a{margin:10px 10px 0 0}
.main{margin-top:20px;padding:0 10vw;}
#nav{display:flex;flex-wrap: wrap;padding:20px;border:solid 1px #ddd;border-radius:1rem;max-height: 150px;overflow-y:auto;}
.nav-item{height:36px;padding:0 10px;line-height:36px;font-size:16px;cursor:pointer;position:relative}
.nav-item.open{margin-left:10px;}
.nav-item.open::after{content:'';position:absolute;top:25%;left:-5px;height:50%;width: 0;;border-left:solid 1px #ddd;}
.nav-item::before{content:'';position:absolute;bottom:2px;left:10px;width:0;height:2px;border-radius:2px;background:var(--color);transition-duration:0.3s}
.nav-item:hover,.nav-item.active{color:var(--color)}
.nav-item:hover::before,.nav-item.active::before{width:calc(100% - 20px)}
.content{margin-top: 20px;width:100%;height:calc(100vh - 300px);border:solid 1px #ddd;border-radius:1rem;overflow:hidden}
</style>
</head>
<body>
<div class="head">
<h2>funAnimation <span> —— 有趣的样式和动画</span></h2>
<div class="badge">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank"><img src="https://img.shields.io/badge/language-CSS3-F43059?logo=css3&logoColor=F43059" alt=""></a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><img src="https://img.shields.io/badge/language-JS-f7df1e?logo=javascript" alt=""></a>
<a href="https://github.com/weizwz/fun-animation" target="_blank"><img src="https://img.shields.io/badge/funAnimation-Github-ff00ff?logo=GitHub&logoColor=ff00ff" alt="funAnimation"></a>
<a href="https://mit-license.org/" target="_blank"><img src="https://img.shields.io/github/license/weizwz/fun-animation" alt="license"></a>
</div>
</div>
<div class="main">
<div id="nav">
<!-- <div class="nav-item"></div> -->
</div>
<div class="content">
<iframe src="" frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
</body>
<script>
const config = [
{ name: '无缝滚动', path: 'page/seamlessScrolling.html' },
{ name: '瀑布流', path: 'page/autoLayout.html' },
{ name: '渐变文字', path: 'page/textGradient.html' },
{ name: '打字机', path: 'page/typewriter.html' },
{ name: '龙年腾云', path: 'page/dragon.html' },
{ name: '过年灯笼', path: 'page/lantern.html' },
{ name: '翻页文字', path: 'page/textPage.html' },
{ name: '加载动画', path: 'page/textLoading.html' },
{ name: '3D文字', path: 'page/3dtext.html' },
{ name: '波浪文字', path: 'page/textWavy.html' },
{ name: '自动弹幕', path: 'page/barrage.html' },
{ name: '流体按钮', path: 'page/fluidBtn.html' },
{ name: '流光按钮', path: 'page/danceTime.html' },
{ name: '爆炸按钮', path: 'page/explodedBtn.html' },
{ name: '流动波浪', path: 'page/flowWave.html' },
{ name: '流动边框', path: 'page/flowBorder.html' },
{ name: '登录表单', path: 'page/loginForm.html' },
{ name: '背景文字', path: 'page/bgText.html' },
{ name: '爱心文字', path: 'page/loveText.html' },
{ name: '黑白换肤', path: 'page/funDark.html', type: 'open' },
]
document.body.onload = function () {
let navStr = ''
for (const item of config) {
let className = item.path === config[0].path ? 'nav-item active' : 'nav-item'
if (item.path == 'page/funDark.html') {
className += ' open'
}
navStr += `<div class="${className}" onclick="load(this, '${item.path}', '${item.type || ''}')">${item.name}</div>`
}
document.querySelector('#nav').innerHTML = navStr
}
/**
* 加载页面
* @param {Element} e 点击的元素
* @param {string} path 页面路径
* @param {string} type 页面类型，可选值：'open' 打开新页面
*/
function load(e, path, type) {
if (type && type === 'open') {
window.open(path)
return
}
const $items = document.querySelectorAll('.nav-item')
if ($items.length > 0) {
for (const item of $items) {
item.className = 'nav-item'
const clickStr = item.getAttribute('onclick')
if (clickStr.indexOf('page/funDark.html') >= 0) {
item.className += ' open'
}
}
}
if (e) e.className += ' active'
document.querySelector(".content > iframe").src = path
}
load(document.querySelector('.nav-item'), config[0].path)
</script>
</html>