摘要:代码如下:CSS:用一个绝对定位的p作为动画滑块,改变它的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> <p id="nav_wrapper"> <p id="nav_menu"> <a href="#" id="current_nav">首页</a> <a href="#">产品列表</a> <a href="#">客户案例</a> <a href="#">服务平台</a> <a href="#">交流论坛</a> <a href="#">关于我们</a> </p> <p id="nav_animate_block"></p> </p> </body> </html>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-jQuery弹性滑动导航菜单实现思路及代码

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

CSS:用一个绝对定位的p作为动画滑块,改变它的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>
<p id="nav_wrapper">
<p id="nav_menu">
<a href="#" id="current_nav">首页</a>
<a href="#">产品列表</a>
<a href="#">客户案例</a>
<a href="#">服务平台</a>
<a href="#">交流论坛</a>
<a href="#">关于我们</a>
</p>
<p id="nav_animate_block"></p>
</p>
</body>
</html>

代码如下:

CSS:用一个绝对定位的p作为动画滑块,改变它的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>
<p id="nav_wrapper">
<p id="nav_menu">
<a href="#" id="current_nav">首页</a>
<a href="#">产品列表</a>
<a href="#">客户案例</a>
<a href="#">服务平台</a>
<a href="#">交流论坛</a>
<a href="#">关于我们</a>
</p>
<p id="nav_animate_block"></p>
</p>
</body>
</html>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-jQuery弹性滑动导航菜单实现思路及代码

全部内容,希望文章能够帮你解决

js实例教程-jQuery弹性滑动导航菜单实现思路及代码

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过