Jquery點選事件-橫線跟隨滑鼠移動

2019-12-11 08:54:34

今天我們利用Jquery和animate()製作簡單動畫，通過這個原理可以製作導航欄效果，我們從最基礎的原理入手，逐個對其新增效果，當然還有省程式碼樣式，以後我們在學。

在DW中建立h1和幾個div,並對其進行屬性修飾

設定效果如圖所示，在圖形上方有一條可以移動的線，當滑鼠點選哪個塊，上方的線就會移動到那個塊的上方

簡單基礎程式碼輸入完成後，開始進行修飾，這是一個點選事件，所示輸入click的固定搭配，然後滑鼠點選第一個塊時，上方的線h1移動位置，當點選第一個div時，h1移動位置為0，不需要移動

$("div:eq(0)").click(function(){

$("h1").animate({left:0})

})

當點選第二個塊時，上方的線移動到第二個div 上方，所以選擇div:eq(1),h1的移動位置為塊狀寬度100px+margin-left右邊距10px=110px;

$("div:eq(0)").click(function(){

$("h1").animate({left:0})

})

$("div:eq(1)").click(function(){

$("h1").animate({left:110})

})

ctrl+s將程式碼儲存後，F12在瀏覽器中預覽效果，當滑鼠點選觀察圖時，線移動到上方

然後再對第三個div設定效果

$("div:eq(2)").click(function(){

$("h1").animate({left:220})

})

最後將檔案儲存，檢視最終效果，滑鼠點選哪個div，上方的線條就會自動跳轉到對應的塊狀上方。