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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
js实现左右轮播图
Jan 09 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
如何在postman中添加cookie信息步骤解析
Jun 30 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写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python中GIL的使用详解
2018/10/03 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python远程方法调用实现过程解析
2020/07/28 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
《去年的树》教学反思
2014/04/11 职场文书
见习报告的格式
2014/10/31 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
MySQL之DML语言
2021/04/05 MySQL
教你怎么用Python监控愉客行车程
2021/04/29 Python