jQuery彈性滑動導航菜單實現思路及代碼
編輯：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>
小編推薦
熱門推薦