jQuery弹性滑动导航菜单实现思路及代码


Posted in Javascript onMay 02, 2013

jQuery弹性滑动导航菜单实现思路及代码

<!-- 本文参照了该作者的思路:http://runjs.cn/code/ouvvjqka,jquery代码系另外编写 --> 
<!-- 本文出自:http://blog.csdn.net/liuyanzhi08 --> 
<!-- 实现思路: 
CSS:用一个绝对定位的div作为动画滑块,改变它的left属性来呈现动画效果 
javascript:hover()触发移动鼠标到导航nav的动作,和移出导航nav的动作(即返回到current导航) 
--> 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<meta name="author" content="Nancle" /> 
<title>jQuery弹性滑动导航菜单</title> 
<style type="text/css"> 
body{ font-family:"Microsoft YaHei";} 
#nav_wrapper{ position:relative; width:835px; margin:80px auto; border-bottom:2px #ddd solid;} 
#nav_wrapper #nav_menu{ height:50px;} 
#nav_wrapper #nav_menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16px; text-decoration:none;} 
#nav_wrapper #nav_animate_block{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var $current_nav = $("#current_nav"); //current元素(当前所在导航项) 
var current_nav_width = $current_nav.innerWidth(); 
var current_nav_left = $current_nav.position().left; 
var $nav_animate_block = $("#nav_animate_block"); //动画滑块 
$nav_animate_block.css({ width:current_nav_width, left:current_nav_left }); //初始状态下,动画滑块位置在current元素 
// 鼠标进入a元素时触发动画事件 
$("#nav_menu a").hover(function(){ 
var index = $(this).index(); 
var $a_cur = $("#nav_menu").find("a").eq(index);//鼠标移动到的a元素 
//利用触发的a元素索引获取其left位置和它的宽度 
var width = $a_cur.innerWidth(); 
var left = $a_cur.position().left; 
//设置动画滑块位置 
$nav_animate_block.stop().animate({ 
width: width, 
left: left 
}, 300) 
}, function(){ 
//鼠标离开a元素时,动画滑块返回current元素位置 
$nav_animate_block.stop().animate({ 
width: current_nav_width, 
left: current_nav_left 
}) 
}) 
}); 
</script> 
</head> 
<body> 
<div id="nav_wrapper"> 
<div id="nav_menu"> 
<a href="#" id="current_nav">首页</a> 
<a href="#">产品列表</a> 
<a href="#">客户案例</a> 
<a href="#">服务平台</a> 
<a href="#">交流论坛</a> 
<a href="#">关于我们</a> 
</div> 
<div id="nav_animate_block"></div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
跟我学习javascript的循环
Nov 18 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 #Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 #Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 #Javascript
JavaScript 实现类的多种方法实例
May 01 #Javascript
Json字符串转换为JS对象的高效方法实例
May 01 #Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 #Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 #Javascript
You might like
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
js最简单的拖拽效果实现代码
2010/09/24 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python中p-value的实现方式
2019/12/16 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
财务分析个人的自荐书范文
2013/11/24 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
出租房屋协议书
2014/09/14 职场文书
单位介绍信格式
2015/01/31 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript