jQuery蓝色风格滑动导航栏代码分享


Posted in Javascript onAugust 19, 2015

这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码。

使用方法:

1、依次引入 nicenav.css、jQuery脚本库以及 jquery.nicenav.js 文件;
2、复制代码到页面中即可。
3、可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度。

 源码下载地址

为大家分享的jQuery蓝色风格滑动导航栏代码如下

<head>
 
 <style type="text/css">
 #bg { background-color: rgb(102, 132, 228); padding: 20px; }
 </style>
 <title>jQuery蓝色风格滑动导航栏</title>
 <link href="css/nicenav.css" rel="stylesheet" />
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
 <script src="js/jquery.nicenav.js" type="text/javascript"></script>
</head>
<body>
 <div id="bg">
 <!-- 代码 开始 -->
 <div id="container">
 <ul id="nav">
 <li><a href="//3water.com" target="_blank">三水点靠木<span>3water</span></a></li>
 <li><a href="//3water.com/web/" target="_blank">网页制作<span>made</span></a></li>
 <li><a href="//3water.com/jiaoben/" target="_blank">脚本下载<span>download</span></a></li>
 <li><a href="//3water.com/list/index_1.htm" target="_blank">网络编程<span>programme</span></a></li>
 <li><a href="//3water.com/list/index_104.htm" target="_blank">数据库<span>database</span></a></li>
 <li><a href="//3water.com/books/" target="_blank">电子书籍<span>e-books</span></a></li>
 <li><a href="//3water.com/media/" target="_blank">媒体动画<span>flash</span></a></li>
 </ul>
 <div id="buoy"></div>
 </div>
 <script type="text/javascript">
 $.nicenav(300);
 </script>
 <!-- 代码 结束 -->
 </div>
 
</body>
</html>

运行效果图:

jQuery蓝色风格滑动导航栏代码分享

更多关于滑动效果的专题,请点击下方链接查看:

以上就是为大家分享的jQuery蓝色风格滑动导航栏代码,希望大家可以喜欢。

Javascript 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
js实现文本框支持加减运算的方法
Aug 19 #Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 #Javascript
纯CSS3代码实现滑动开关效果
Aug 19 #Javascript
js实现input框文字动态变换显示效果
Aug 19 #Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 #Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 #Javascript
easyui Droppable组件实现放置特效
Aug 19 #Javascript
You might like
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php 日期时间处理函数小结
2009/12/18 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Django的CVB实例详解
2020/02/10 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
大四本科生的自我评价
2013/12/30 职场文书
信访稳定工作汇报
2014/10/27 职场文书
工程服务质量承诺书
2015/04/29 职场文书
委托收款证明
2015/06/23 职场文书