原生js实现波浪导航效果

最新推荐文章于 2024-08-16 08:27:43 发布
最新推荐文章于 2024-08-16 08:27:43 发布
阅读量1.9k 收藏 2
点赞数 5
分类专栏： js 文章标签： js 导航 效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzhneg123/article/details/87893310
版权

展示效果：

源码展示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js波浪导航</title>
<style>
 * {
    margin:0;
    padding:0;
    font-family:"微软雅黑";
}
body {
    width:100vw;
}
.wave-ul {
    list-style:none;
}
.wave-a {
    text-decoration:none;
    display:block;
}
.wave-span {
    background:#f69;
    color:#fff;
    width:20px;
    display:block;
}
.waveli-in-right {
    float:left;
}
.waveli-in-left {
    float:right;
}
.wavenav-right {
    left:100%;
    margin-left:-20px;
}
.wavenav-left {
    left:0%;
    margin-left:-130px;
}
.wave-li {
    margin:1px;
    display:block;
    background:#ccc;
    width:150px;
    overflow:hidden;
}
.wave-nav {
    position:fixed;
}
</style>
</head>
<body>
<div id="test"><div></div></div>

<script>
var wavenav = function(json, dir, top) {
    this.json = json;
    this.dir = dir;
    this.top = top;
}
wavenav.prototype = {
    constructor: wavenav,
    createHTML: function() {
        var json = this.json;
        var htmlstr = '<nav class="wave-nav"><ul class="wave-ul">';
        for (var key in json) {
            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() {
        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) {
            oLastNav.classList.add(classname1);
            for (let i = 0; i < oLi.length; i++) {
                oLi[i].firstChild.classList.add(classname2);
                oLi[i].lastChild.classList.add(classname2);
            }
        }
    },
    bindEVENT: function() {
        var oUl = document.getElementsByClassName('wave-ul');
        for (let i = 0; i < oUl.length; i++) {
            oUl[i].onmouseover = function() {
                var oLi = oUl[i].children;
                for (let i = 0; i < oLi.length; i++) {
                    oLi[i].style.transition = '1s ' + 0.1 * i + 's';
                    if (oLi[i].firstChild.className == 'wave-span waveli-in-left') {
                        oLi[i].style.marginLeft = '130px';
                    } else {
                        oLi[i].style.marginLeft = '-130px';
                    }
                }
            }
            oUl[i].onmouseleave = function() {
                var oLi = oUl[i].children;
                for (let i = 0; i < oLi.length; i++) {
                    oLi[i].style.marginLeft = '0px';
                }
            }
        }
    }
}

function createWaveNav(dom, json, direction = 'RIGHT', top = '0px') {
    var n = new wavenav(json, direction, top);
    dom.innerHTML += n.createHTML();
    n.renderCSS();
    wavenav.prototype.bindEVENT();
}


var json = {
    '1': ['HTML', 'javascript:void(0)'],
    '2': ['CSS', 'javascript:void(0)'],
    '3': ['JAVASCRIPT', 'javascript:void(0)'],
}
var json1 = {
    '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>

Mr.王征
关注
专栏目录
Github安卓流行布局开源库
tasty
10-18 895
抽屉菜单 MaterialDrawer ★7337 - 安卓抽屉效果实现方案 Side-Menu.Android ★3865 - 创意边侧菜单 FlowingDrawer ★1744 - 向右滑动流动抽屉效果 SlidingRootNav ★1338 - 仿DrawerLayout的ViewGroup FantasySlide ★1049 - 单手势滑出侧边栏与选择菜单 Floating-Nav...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
热门推荐
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
JS水波效果
11-30
javascript实现的水波效果，使用HTML canvas标签实现显示界面
JS鼠标滑过导航背景波浪特效.zip
07-04
JS鼠标滑过导航背景波浪特效
探索高效导航：megamenu-js 开源项目推荐
最新发布
gitblog_00824的博客
08-16 295
探索高效导航：megamenu-js 开源项目推荐 megamenu-jsLast responsive megamenu you'll ever need项目地址:https://gitcode.com/gh_mirrors/me/megamenu-js 在网页设计中，导航菜单是用户体验的关键组成部分。一个高效、响应迅速且易于管理的导航菜单可以显著提升用户满意度。今天，我们要介绍的是一个开源项...
JS实现很酷的水波文字特效实例
10-24
主要介绍了JS实现很酷的水波文字特效,实例分析了javascript操作图层特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
导航水波纹点击效果外加滑动效果
03-18
插件描述：导航水波纹点击效果外加滑动效果. 参考示例：http://www.jq22.com/jquery-info6270
JavaScript 波浪
司马懿的西山居
01-13 1524
<html> <head> <meta charset="utf8"/> <title>波浪</title> <style> #canvas { border: 1px solid #d3d3d3; float:left; }
react-native-wave-navigation:使用 ReactNative 创建的 Wave UI 动画
08-04
`react-native-wave-navigation`的Wave UI动画是通过在屏幕上创建一系列动态起伏的波浪效果来实现的。这些波浪可以用于导航栏或者屏幕过渡，为用户带来独特的交互体验。要开始使用这个库，你需要先安装它： ```bash...
PC项目笔记
木木木森林
09-09 178
整体引入 lodash：import _ from 'lodash' 按需引入 lodash 中的 throttle：import throttle from 'lodash/throttle' 事件控制 2、3 级分类的显示和隐藏： 原来的是使用 css 去做的，改为一个类： 首先把原来的 hover 去掉，改为一个类。 在 item 身上动态的强制绑定 class，[item_on: 布尔值]，布尔值为 true，那么当前的这个 item 的类就生效。 移入哪一个 item，就让当前这个 it..
html动态线条背景鼠标,动态背景线条鼠标移动线条汇聚---背景特效
weixin_35520787的博客
06-03 1707
经常在浏览网页的时候看到有鼠标能够吸附动态线条的动画效果，如下所示觉得很酷炫，百度了一下(记录下来，以后就可以使用了)，效果是用一段js代码实现的，如下所示amp;amp;lt;script...随鼠标移动背景特效是一款动画导航jQuery插件Lava Lamp，不但可以做为导航动画的插件，还可以给图像增加一些特效，不错的一个jquery插件。超级炫酷多彩气泡粒子跟随鼠标移动扩散js特效代码下载，...
实现波浪文字动画特效的纯JS插件
07-10
实现波浪文字动画特效的纯JS插件
4种动态波浪文字动画js特效.zip
07-04
一款可以实现4种波浪文字效果，波浪效果，反弹效果，振动波效果和翻转效果的动态波浪文字动画js特效。
jQuery网站底部动态波浪背景动画特效
06-10
jQuery网站底部动态波浪背景动画特效是一款适用于服务器和云计算服务提供商网站的页面底部导航样式代码，波浪式动画效果给网站带来一种活力。
CSS3波浪状弹性导航菜单.zip
05-27
CSS3波浪状弹性导航菜单，二级导航菜单，鼠标经过一级菜单显示二级菜单。
大波浪效果
01-04
大波浪效果大波浪效果大波浪效果大波浪效果大波浪效果
js实现波浪天气效果
qq_45921597的博客
10-06 543
【代码】js实现波浪天气效果。
css3实现波浪右侧导航栏
William_fang的博客
04-29 1328
文章目录1.必备知识2.源码3.总结 1.必备知识 css定位 参考教程：Web前端基础3-定位 css3过渡 参考教程：css3过渡 css3的nth-child()选择器 参考教程：css3的nth-child()选择器 2.源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte
前端特效源代码：波浪动态导航栏/条 H5+css
m0_51684972的博客
11-22 1598
波浪动态导航栏 H5+css效果展示源码H5部分css部分 这个波浪效果程度可以自己调 背景色和波浪都可以自己试试换一换 记得h5和css在同一文件目录下 个人感觉比较简单，逻辑很好实现，只用了css来控制样式 效果展示 源码 H5部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="w
原生JS实现电商侧边导航高亮效果
"原生js实现电商侧边导航效果，通过锚点定位和滚动监听事件，实现楼层跳转和高亮显示。" 在电商网站中，侧边导航通常用于帮助用户快速浏览不同商品分类或楼层。本文将介绍如何使用原生JavaScript来实现这样一个功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值