jQuery弹性滑动导航菜单实现思路及代码
更新时间：2013年05月02日 16:14:11 作者：
用一个绝对定位的div作为动画滑块,改变它的left属性来呈现动画效果javascript：hover()触发移动鼠标到导航nav的动作，和移出导航nav的动作
复制代码 代码如下:
<!-- 本文参照了该作者的思路：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>
相关文章
下面小编就为大家带来一篇jquery插件方式实现table查询功能的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
jquery layui分页控件在项目开发阶段经常用到，下面通过本文给大家介绍jQuery layui分页控件的使用，非常不错，感兴趣的朋友一起看下吧2016-08-08
如何用input标签和jquery实现多图片的上传和回显功能
本文通过图文并茂的形式给大家介绍了如何用input标签和jquery实现多图片的上传和回显功能,需要的朋友可以参考下2018-05-05
Jquery中的val(),text(),html()是对javascrip中的value、innerText、innerHtml三个属性的封装2011-01-01
这篇文章主要介绍了jQuery实现获取元素索引值index的方法,涉及jQuery针对页面元素的遍历,index索引操作及属性操作相关技巧,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了jQuery实现高级检索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要为大家详细介绍了jQuery实现手风琴小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
本文简单介绍了jQuery对象初始化传参方式，以及具体的示例，是篇非常不错的文章，这里推荐给小伙伴们。2015-02-02
Bootstrap是最流行的前端开发框架。本文涉及到bootstrap的特性介绍，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要为大家详细介绍了jQuery实现呼吸轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论