原生js实现波浪导航效果
作者:Mr.王征 时间:2024-04-17 10:06:25
本文实例为大家分享了原生js实现波浪导航效果的具体代码,供大家参考,具体内容如下
展示效果:
源码展示:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js波浪导航</title>
<style>
* {undefined
margin:0;
padding:0;
font-family:"微软雅黑";
}
body {undefined
width:100vw;
}
.wave-ul {undefined
list-style:none;
}
.wave-a {undefined
text-decoration:none;
display:block;
}
.wave-span {undefined
background:#f69;
color:#fff;
width:20px;
display:block;
}
.waveli-in-right {undefined
float:left;
}
.waveli-in-left {undefined
float:right;
}
.wavenav-right {undefined
left:100%;
margin-left:-20px;
}
.wavenav-left {undefined
left:0%;
margin-left:-130px;
}
.wave-li {undefined
margin:1px;
display:block;
background:#ccc;
width:150px;
overflow:hidden;
}
.wave-nav {undefined
position:fixed;
}
</style>
</head>
<body>
<div id="test"><div></div></div>
<script>
var wavenav = function(json, dir, top) {undefined
this.json = json;
this.dir = dir;
this.top = top;
}
wavenav.prototype = {undefined
constructor: wavenav,
createHTML: function() {undefined
var json = this.json;
var htmlstr = '<nav class="wave-nav"><ul class="wave-ul">';
for (var key in json) {undefined
htmlstr += '<li class="wave-li"><span class="wave-span">' + key +
'</span><a href="' + json[key][1] +
'" class="wave-a">' + json[key][0] + '</a></li>';
}
htmlstr += '</ul></nav>'
return htmlstr;
},
renderCSS: function() {undefined
var dir = this.dir;
var top = this.top;
var oNavLenght = document.getElementsByClassName('wave-nav').length;
var oLastNav = document.getElementsByClassName('wave-nav')[oNavLenght - 1];
oLastNav.style.top = top;
var oLastUl = oLastNav.children[0];
var oLi = oLastUl.children;
switch (dir) {
case 'LEFT':
addClassName('wavenav-left', 'waveli-in-left');
break;
default:
addClassName('wavenav-right', 'waveli-in-right');
break;
}
function addClassName(classname1, classname2) {undefined
oLastNav.classList.add(classname1);
for (let i = 0; i < oLi.length; i++) {undefined
oLi[i].firstChild.classList.add(classname2);
oLi[i].lastChild.classList.add(classname2);
}
}
},
bindEVENT: function() {undefined
var oUl = document.getElementsByClassName('wave-ul');
for (let i = 0; i < oUl.length; i++) {undefined
oUl[i].onmouseover = function() {undefined
var oLi = oUl[i].children;
for (let i = 0; i < oLi.length; i++) {undefined
oLi[i].style.transition = '1s ' + 0.1 * i + 's';
if (oLi[i].firstChild.className == 'wave-span waveli-in-left') {undefined
oLi[i].style.marginLeft = '130px';
} else {undefined
oLi[i].style.marginLeft = '-130px';
}
}
}
oUl[i].onmouseleave = function() {undefined
var oLi = oUl[i].children;
for (let i = 0; i < oLi.length; i++) {undefined
oLi[i].style.marginLeft = '0px';
}
}
}
}
}
function createWaveNav(dom, json, direction = 'RIGHT', top = '0px') {undefined
var n = new wavenav(json, direction, top);
dom.innerHTML += n.createHTML();
n.renderCSS();
wavenav.prototype.bindEVENT();
}
var json = {undefined
'1': ['HTML', 'javascript:void(0)'],
'2': ['CSS', 'javascript:void(0)'],
'3': ['JAVASCRIPT', 'javascript:void(0)'],
}
var json1 = {undefined
'1': ['HTML', 'javascript:void(0)'],
'2': ['CSS', 'javascript:void(0)'],
'3': ['JAVASCRIPT', 'javascript:void(0)'],
'4': ['java', 'javascript:void(0)']
}
//调用方法
createWaveNav(document.getElementById('test'), json);
createWaveNav(document.getElementById('test'), json1, 'RIGHT', '200px');
createWaveNav(document.getElementById('test'), json1, 'LEFT');
createWaveNav(document.getElementById('test'), json, 'LEFT', '200px');
</script>
</body>
</html>
来源:https://blog.csdn.net/wangzhneg123/article/details/87893310
标签:js,导航
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
js正则相关知识点专题
2024-05-13 10:07:08
![](https://img.aspxhome.com/file/2023/5/125475_0s.png)
HTML5设计原则
2012-04-26 16:46:45
Java获取网络文件并插入数据库的代码
2024-01-23 19:35:10
asp如何用CDONTS发送带附件的邮件?
2010-06-11 19:57:00
基于python神经卷积网络的人脸识别
2023-11-03 17:37:17
![](https://img.aspxhome.com/file/2023/6/64356_0s.png)
一个模仿oso的php论坛程序源码(之二)第1/3页
2024-05-02 17:07:10
python+logging+yaml实现日志分割
2023-12-18 01:19:08
![](https://img.aspxhome.com/file/2023/4/69514_0s.jpg)
解决SQL SERVER 2008数据库表中修改字段后不能保存
2024-01-18 07:31:10
![](https://img.aspxhome.com/file/2023/1/129331_0s.gif)
python 求1-100之间的奇数或者偶数之和的实例
2021-05-28 19:48:58
教你在MySQL 5.0以上版本中配置主从库
2009-01-04 13:17:00
详解使用Visual Studio Code对Node.js进行断点调试
2023-07-01 07:32:34
![](https://img.aspxhome.com/file/2023/0/55900_0s.jpg)
认识延迟时间为 0 的 setTimeout
2008-04-04 16:37:00
golang架构设计开闭原则手写实现
2023-07-21 22:01:36
Python图像处理之图像拼接
2021-08-14 19:27:41
![](https://img.aspxhome.com/file/2023/6/134806_0s.png)
Python中的Matplotlib模块入门教程
2023-08-14 23:05:16
![](https://img.aspxhome.com/file/2023/8/99168_0s.png)
详解Python3中字符串中的数字提取方法
2021-02-22 06:08:15
Div+CSS网页布局对SEO的影响漫谈
2008-08-22 12:58:00
Python元组常见操作示例
2023-06-28 20:48:26
跟老齐学Python之集合(set)
2023-02-11 00:51:31
深入Golang的接口interface
2024-02-20 14:12:00
![](https://img.aspxhome.com/file/2023/8/109758_0s.webp)