jQuery-demos網格手風琴練習

ACodingIceBear發表於2017-12-25
jQuery

練習用jQuery實現一個手風琴，圖片可以自動迴圈滾動，寬高和定位同時變化，當滑鼠移上時當前圖片最大，同一排的圖片高度一致，同一列的寬度一致，滑鼠離開繼續滾動。

思路：結構直接用多個div，圖片使用背景圖，通過定位設定每一行每一列的位置，設定滑鼠當前位置為一個變化量，通過這個變化量來設定其他div的寬高和定位。

  • html和css
        #accordion{
		width: 500px;
		height: 500px;
		margin: 100px auto;
		border: 3px solid #fff;
		position: relative;
		overflow: hidden;
	}
	#accordion .img{
		width: 100px;
		height: 100px;
		border-right: 3px solid #fff;
		border-bottom: 3px solid #fff;
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
	}
        <div id="accordion">
		<div class="img"></div>    //這裡有25個div
	</div>
複製程式碼
  • js部分

1.獲取元素和定義變化量

    var $accordion = $("#accordion");
    var $images = $accordion.find(".img");
    var currentIndex = 0;
複製程式碼

2.定義初始狀態，每個div寬高100，定位值根據索引值和5的餘數關係，除5餘數相同的為同一列(0,5,10,15,20),(1,6,11,16,21)...所以left值相同;每一排的值(0-4,5-9,10-14...)除5得到的值取整之後相同，分別為0，1，2，3，4。

$images.each(function(index){
    $(this).css({
        "width": 100,
        "height": 100,
        "left": index % 5 * 100,
        "top": parseInt(index / 5) * 100
    });
});
複製程式碼

3.封裝設定每個元素樣式的函式，函式中根據遍歷每一個元素的索引值index和設定的變化量currentIndex的比較情況，設定樣式。

function setAllEle(){
    $images.each(function(index){
        $(this).stop(true).animate({
            //索引值除5的餘數若等於當前變化量除5的餘數則表示同一列，寬度統一200，其他列75
            "width": index % 5 == currentIndex % 5 ? 200 : 75,
            //高度通過除5取整判斷是否為同一排
            "height": parseInt(index/5) == parseInt(currentIndex/5) ? 200 : 75,
            //除5餘數大於當前的列，left值等於餘數減1乘以75，再加一個當前的寬度200；小於當前列的就直接等於索引值除5的餘數乘以75
            "left": index % 5 > currentIndex % 5 ? 200 + (index % 5 - 1) * 75 : index % 5 * 75,
            //top值和left值類似，判斷在當前排的上方還是下方，下方等於取整後減1乘以75，而在上方的就直接等於取整的值乘以75
            "top": parseInt(index / 5) <= parseInt(currentIndex / 5) ? parseInt(index / 5) * 75 : 200 + (parseInt(index / 5) - 1) * 75
        }, 1000);
    });
}
複製程式碼

有一點點繞，不過結合圖圖就一目瞭然了，這種通過一個變化量來設定其他元素的方式，關鍵就是找到當前元素和其他元素之間的關係，利用關係式來設定樣式。

jQuery-demos網格手風琴練習

4.新增滑鼠進入和離開的事件監聽

$accordion.delegate(".img","mouseenter",function(){
    //將時間委託給$accordion，如果給每一個div新增事件頁面效果不好，因此使用jQuery的時間委託delegate把時間設給最外層的div
    //滑鼠進入後清除定時器
    clearInterval(timer);
    currentIndex = $(this).index();
    setAllEle();
});
$accordion.mouseleave(function(){
    //滑鼠離開後重啟定時器
    timer = setInterval(function(){
        setAllEle();
        currentIndex++;
        if(currentIndex>24) currentIndex=0;
    }, 1000);
});
複製程式碼

5.設定定時器

var timer = setInterval(function(){
    setAllEle();
    currentIndex++;
    //訊號量超過24之後置0重新開始累加
    if(currentIndex>24) currentIndex=0;
}, 1000);
複製程式碼

原始碼戳這裡

jQuery的功能強大之處還有很多，還要多練習才能很好的掌握。爭取早日可以寫一個自己的類似jQuery的庫，加油！

相關文章