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 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
Vue调用后端java接口的实例代码
Oct 28 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
php中定义网站根目录的常用方法
2010/08/08 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
[JS]点出统计器
2020/10/11 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
详解使用vue实现tab 切换操作
2017/07/03 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python网络应用开发知识点浅析
2019/05/28 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
C#笔试题
2015/07/14 面试题
音乐研修感悟
2015/11/18 职场文书
python自动化测试之Selenium详解
2022/03/13 Python