原生js实现波浪导航效果
作者:Mr.王征
这篇文章主要为大家详细介绍了原生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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。