原生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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS中用三种方式实现导航菜单中的二级下拉菜单
我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style
-
JS实现选中当前菜单后高亮显示的导航条效果
本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho
-
JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.
-
js实现移动端导航点击自动滑动效果
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.
-
JS 实现导航栏悬停效果
JS-实现导航栏悬停 先布个局: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <met
-
js实现无限级树形导航列表效果代码
本文实例讲述了js实现无限级树形导航列表效果代码.分享给大家供大家参考.具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/ 具体代码如下: <meta http-equiv="Content-Type" content="text/html;
-
一个js控制的导航菜单实例代码
这种菜单效果是通过脚本和样式控制的,对于新手来说是非常好的学习内容: 这种昨晚一边看舞动奇迹,一边整理这个菜单的小代码,一起来看看吧,会了可以温故知新,不会的可以借鉴一下思想,其实就是想完善一下这种前端的思想,让它不要再陌生: 这是一个asp.net的master页面里面的菜单部分 Html部分: 复制代码 代码如下: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPa
-
js实现的常用的左侧导航效果
常用的左侧导航效果,JS简单,为提高导航性能而生,各位可以 参考应用. 效果展示: HTML: 复制代码 代码如下: <!--左侧菜单--> <div class="menu"> <ul class="menu_list"> <li class="even"> <p class="menu_title bgfs"><a href="#" t
-
JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
CSS3+Js实现响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c