首頁 > web前端 > js教程 > 主體

jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery

WBOY
發布: 2016-05-16 17:38:53
原創
1251 人瀏覽過

其實主要是jquery 層選擇器的應用,jquery 高手可以跳過。 。 。

網易相簿效果圖如下:當滑鼠移動經過照片就顯示“設為封面|刪除”,移開後就隱藏,此效果在web開發中經常會用到。故總結一下

直接上碼:


複製程式碼 程式碼如下:

程式碼如下:


UBL "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



Insert title here







jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquerytitle="myhome photo" alt="jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">
jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery 共2張照片


編輯屬性|href="#">刪除



jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquerytitle="myhome photo" alt="jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY =/nJnRixC/lG8=/e400bd4c851240459db967b721c5101e_a.JPG">


jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jqueryHinfo >共2張照片


編輯屬性|href="#">刪除



jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquerytitle="myhome photo" alt="jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery"
src="/FileManager/upload/photo/l9pztyhx5tY=/nJnRixC/lG8=/e400bd4c851240459 >


jQuery 網易相簿滑鼠移動顯示隱藏效果實現代碼_jquery 共2張照片


編輯屬性|href="#">刪除





運行結果:

事實上主要是jquery的層選擇器


$("div span")//選擇

裡所有元素
$("div>span")//選擇
元素下元素名為的元素(僅一個)
$('prev next')//選擇緊接在prev元素後的next元素(所有匹配的對象)$('prev~siblings')//選擇prev元素之後的所有sibling元素

這裡用到是選擇元素內的元素「find()」方法。

一年多沒有用JQeruy了,方法全忘記啦,複習一下吧。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板