|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 jQuery中主要通過鼠標滑入或滑出時給animate設置寬度來實現手風琴效果今天將和大家介紹如何使用jQuery來實現手風琴效果也就是當鼠標進入時會擴展,滑出時會變小的效果 【推薦課程:jQuery教程】
實現手風琴效果所需要的知識點 (1)通過for循環來遍歷所有的圖片,利用jQuery中eq()方法選擇li標簽給他添加背景圖片 eq(index)方法:指示元素的位置(最小為 0),如果為負數,則從集合中的最后一個元素往回計數。 $(".box>ul>li").eq(i).css("backgroundImage","url(image/"+(i+1)+".jpg)");(2)mouseenter():鼠標指針滑進元素時,會觸發事件即執行當發生 mouseenter 事件時被運行的函數 (3)mouseleave():當鼠標指針離開元素時,會觸發事件,規定當發生 mouseleave 事件時被運行的函數,該事件大多數時候會與 mouseenter 事件一起使用。 (4)stop(stopAll,goToEnd):停止當前正在運行的動畫。 stopAll :是否停止被選元素的所有加入隊列的動畫, goToEnd :是否允許完成當前的動畫。 這兩個參數都是可選的但是goToEnd 參數只能在設置了 stopAll 參數時才可以使用,不能單獨使用 (5)siblings(selector): 獲得匹配集合中每個元素的并通過選擇器進行篩選是可選的。 selector 指字符串值,指用于匹配元素的選擇器表達式。 (6)animate() 方法:執行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態改變為另一個狀態,注意只有數字值可創建動畫,字符串值無法創建動畫。 注意:在寫動畫時注意要加stop()停止原先的動畫目的是為了防止動畫重疊影響效果。 完整代碼展示 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
width:1300px;
}
.box{
width:1200px;
height: 200px;
border: 1px solid #ccc;
margin: 100px auto;
}
.box li{
width:240px;
height: 200px;
float:left;//讓所有的li元素左對齊
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){
for(var i=0;i<$(".box>ul>li").length;i++){
$(".box>ul>li").eq(i).css("backgroundImage","url(image/"+(i+1)+".jpg)");
}
$(".box>ul>li").mouseenter(function(){
// 鼠標滑過時li的寬度為800,離開時為240
$(this).stop().animate({width:800}).siblings().stop().animate({width:100}).mouseleave
(function(){
$(".box>ul>li").stop().animate({width:240})
})
})
})
</script>
</body>
</html>效果圖
動畫演示
總結:以上就是本篇文章的全部內容了,希望通過本篇文章可以讓大家學會如何通過jQuery來實現手風琴效果。 以上就是jQuery如何實現手風琴效果的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!