jQuery小案例之滑鼠滑過顯示對應的精品推薦

2021-09-16 19:40:27 字數 768 閱讀 6933

先來看一下效果:

**部分:

html:

分為左中右三部分,三部分均由列表實現。

css部分:

jquery部分:

全部**->方便複製貼上

總結1.獲取索引的方法-> index();

2.需要記錄滑過的索引且注意左右兩側的索引不一樣,右側的索引在當前案例中藥加10。

3.讓**顯示和隱藏使用方法show(),hide()。

4.本案例用到索引選擇器eq();括號中引數為數字,出eq()還有gt(),lt(),前者指給不包括當前元素後面的元素新增相應的樣式,後者為給不包括當前元素前面的元素新增相應的樣式。

5.拼接字串串時注意在適當位置加引號,如當前案例中的:

$("#center li:eq(" + index + ")").show();
6.本人也剛剛入門若上述**及表述有誤,望看到的大佬及時指出並糾正,定虛心求教。

滑鼠懸停小案例

主要就是兩個 乙個 hover選擇器 乙個transform屬性。hover選擇器。hover選擇器用於選擇滑鼠指標浮動在上面的元素,它可用於所有元素,不只是鏈結。通過它選擇到元素並設定懸停時的樣式。transform屬性。transform 屬性向元素應用 2d 或 3d 轉換。這個屬性是復合屬性...

jQuery事件之滑鼠事件

滑鼠事件是在使用者移動滑鼠游標或者使用任意滑鼠鍵點選時觸發的。1 click事件 click事件於使用者在元素敲擊滑鼠左鍵,並在相同元素上鬆開左鍵時觸發。p click function 2 dbclick事件 dbclick事件在使用者完成迅速連續的兩次點選之後觸發,雙擊的速度取決於作業系統的設定...

jQuery中實現Ajax小案例

需求 引入jquery實現根據圖書編號查詢對應圖書 前台 請輸入圖書編號 後台 code get code arr array arr 1 array bookname 西遊記 author 吳承恩 arr 2 array bookname 三國演義 author 羅貫中 arr 3 array b...