JS實現導航條效果——current跟隨鼠標hover移動

時間 2019-11-18

標籤實現導航效果 current 跟隨鼠標 hover 移動欄目 JavaScript 简体版

原文原文鏈接

<!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>無標題文檔</title>
<style type="text/css">
body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;}
#nav{ position:relative; width:832px; _width:835px; margin:100px auto 0 auto; border-bottom:2px #ddd solid;}
#nav .nav-menu{ height:50px;}
#nav .nav-menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16px; text-decoration:none;}
#nav .nav-current{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;}
</style>
<script type="text/javascript" src="http://www.webskys.com/skin/tomato/js/jquery.js"></script>
<script type="text/javascript">
$(function(){

    var cur_width=$(".current").innerWidth();//當前a的寬度
    var cur_left=$(".current").position().left;//當前a的左位置    
    $(".nav-current").css({width:cur_width,left:cur_left})//當前的底部線

    $("#nav").find("a").hover(
            function(){        
                $(".nav-current").stop().animate(
                {left: $(this).position().left,
                width: $(this).innerWidth
                },300);
            } , function() {
                    $(".nav-current").stop().animate({
                    width:cur_width,left:cur_left
                    } , 300);
                }
        )
    
})
</script>
</head>

<body>
<div id="nav">
<div class="nav-menu">
<a href="#">首頁</a>
<a href="#" class="current">瞭解咱們</a>
<a href="#">產品展現</a>
<a href="#">服務報價</a>
<a href="#">最新消息</a>
<a href="#">聯繫方式</a>
</div>
<div class="nav-current"></div>
</div>
</body>
</html>

初始效果圖javascript

當鼠標放到a上時，綠色的線會動畫移動到該a下css

知識點：html

　　hover(over,out)一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它爲頻繁使用的任務提供了一種「保持在其中」的狀態。
java

　　當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。並且，會伴隨着對鼠標是否仍然處在特定元素中的檢測（例如，處在div中的圖像），若是是，則會繼續保持「懸停」狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。

jquery

參數 :
　　over (Function) : 鼠標移到元素上要觸發的函數
　　out (Function): 鼠標移出元素要觸發的函數web

示例 :
鼠標懸停的表格加上特定的類函數

jQuery 代碼: 動畫

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。