原生js实现波浪导航效果
作者:Mr.王征 发布时间:2024-04-17 10:06:25
标签:js,导航
本文实例为大家分享了原生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
0
投稿
猜你喜欢
- ASP开发中有用的函数(function)集合,挺有用的,请大家保留!'******************************
- 很简单的方法,但很实用。用过新浪邮箱的朋友应该会知道此脚本的效果。如果您提交的数据处理时间很长,用这个做为提示很不错的.将下面的代码复制到&
- 新建server.jsyarn init -yyarn add express nodemon -Dvar express = requir
- CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来
- javascript代码编写在页面中实现页内搜索功能,类似Word等文本编辑软件里的搜索功能,只要是页面中的字符(别管是显在的还是隐蔽在文本
- 一、下载SQL Server 2008 R2安装文件cn_sql_server_2008_r2_enterprise_x86_x64_ia6
- 一、安装redis:1.下载:wget http://download.redis.io/releases/redis-3.2.8.tar.
- 发现问题在一次捞取Top SQL中,发现DB大量执行 select @@session.tx_read_only ,几乎每一条DML语句前,
- 又一个js加密工具:js混淆,完整源代码如下,有点长呵呵:<HTML><HEAD><TITLE>Cunf
- 1. 概述information_schema 数据库跟 performance_schema 一样,都是 MySQL 自带的信息数据库。其
- forms组件django框架提供了一个Form类,来进行web开发中的表单提交数据的处理工作。导入相关模块from django impo
- 有在论坛上看到一帖,《请教查询出连续日期记录的方法》,截图如下:Insus.NET尝试写了程序并做了测试,可以得到预期的结果,SQL代码可参
- 使用命令行时,如果要添加选项的话,python 2.3里新增加了一个模块叫optparse,也是专门来处理命令行选项的。from optpa
- 一、python中进程间通信业务场景:在当前遇到的业务场景中,我们需要启一个间隔任务,这个间隔任务跑一个算法,然后把算法的结果进行一些处理,
- 用两个文件.GLOBAL.ASA和online.asp下面分别给出两个文件的源代码.呵呵,我也是菜鸟,大家加油哟!<SCR
- 一、前言在多进程中,每个进程之间是什么关系呢?其实每个进程都有自己的地址空间、内存、数据栈以及其他记录其运行状态的辅助数据。下面通过一个例子
- 这是初始状态 输入文字变成这样,这里会区分圆角半角,2个半角的文字算一个。 这个是超出的样子 如果超出了点击提
- 前言损失函数在机器学习中用于表示预测值与真实值之间的差距。一般而言,大多数机器学习模型都会通过一定的优化器来减小损失函数从而达到优化预测机器
- 添加字段的语法:alter table tablename add (column datatype [default value][nul
- 本文实例讲述了Python使用import导入本地脚本及导入模块的技巧。分享给大家供大家参考,具体如下:导入本地脚本import 如果你要导