標籤：js jquery 網站導航標題列下面有一小色塊跟隨滑鼠移動 網站導覽列特效
可能很多人看標題不是很明白這個特效，下面簡述一下這個特效：
看到很多網站上的導覽列下面有一個小的色塊，一開始小色塊是處在第一個標題下面的，當滑鼠移動到另一個標題時，這個小色塊就會悠悠地跑到對應的標題下面。
這裡只能看到色塊是移動了，但顯示不出色塊是從Home下面平滑移動到Product下面的。反正就是這個意思了。大家看我上面的解釋就知道了，不行看下面代碼或者把代碼拷貝運行一下就看到效果了
這個特效很好玩，正好朋友寫了這方面的特效代碼，我拿過來看了下，這才發現其實很簡單，就是幾個jquery封裝好的方法拼接一下就ok了，但自己寫還是很犯難，其實主要還是想法和思路的問題。
下面貼出代碼：
注意：
1.用到了jquery庫，大家如果有興趣複製粘貼過去自己調試一下，請自行匯入對應的jquery庫即可
2.用了parent()函數
3.用了position()函數
4.用了stop()函數
(這個stop函數可以重載。可以是一個參數，表示無條件的停止當前的一切動畫。一個是兩個參數，表示是否讓當前動畫執行完成後再停止動畫)
5.用了animate()函數
(這個animate很常用，建議大家去w3cshool上看一下)
6.滑鼠放上去和移開的mouseenter和mouseleave函數
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js滑動導航</title><style>body,html,div{margin:0;padding:0;font-weight:bold;font-family:Verdana, Geneva, sans-serif; font-style:italic;}.menu{margin:0 auto;width: 900px;position: relative;background-color:#000;border:0px solid #000;}.menu ul{ border:0px solid #F00; height:60px; padding:0;}.menu li{float: left;width:80px;list-style: none;padding: 0 20px;text-align: center;height: 60px;line-height: 60px;;border:0px solid #FFF;}.menu li a{text-decoration:none; color:#CCC;}.menu a:hover,.menu li:hover a{color: #0CF;}.back{height: 3px;background-color: #0CF;position: absolute;bottom: 0px;left: 0px;width: 120px;}</style><script src="Js/jquery1.9.1.js" language="javascript" type="text/javascript"></script><script>$(document).ready(function(e) { $(".menu ul li a").mouseenter(function(){var parent=$(this).parent();left=parent.position().left;$(".back").stop(true,true).animate({left:left,width:"120px"}, "fast");})$(".menu ul").mouseleave(function(){$(".back").stop(true,true).animate({left:"0px",width:"120px"},"fast");})});</script></head><body><div class="menu"><ul><li><a href="#">Home</a></li><li><a href="#">Page</a></li><li><a href="#">Picture</a></li><li><a href="#">Product</a></li><li><a href="#">Contact</a></li></ul><div class="back"></div></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
