如何用原生JS实现类似波浪效果的网页导航动画？

2026-04-03 06:371阅读0评论SEO资源

内容介绍
文章标签
相关推荐

本文共计658个文字，预计阅读时间需要3分钟。

原文示例：本文实例为大家分享了原生js实现波浪导航效果的完整代码，供大家参考。具体内容如下：

+ 展示效果：+ 源码展示：js波浪导航* { margin: 0; padding: 0;}

本文实例为大家分享了原生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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。

标签：原生实现波浪导航效果