原生js實(shí)現(xiàn)波浪導(dǎo)航效果

更新時(shí)間：2022年04月13日 08:26:44 作者：Mr.王征

這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)波浪導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了原生js實(shí)現(xiàn)波浪導(dǎo)航效果的具體代碼，供大家參考，具體內(nèi)容如下

展示效果：

源碼展示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js波浪導(dǎo)航</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)']
}
//調(diào)用方法
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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: