jQuery仿QQ面板滑動切換特效

來源:http://www.xdpitk.live/js/4460.html 2019-06-23 11:08瀏覽(182) 收藏

jQuery仿QQ面板滑動切換特效,文字圖標和圖片滑動切換效果,也算是一種選項卡切換方式的體現。
jQuery仿QQ面板滑動切換特效
查看演示 下載資源: 5 下載資源 下載積分: 30 積分

js代碼

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	/*
	* 每個頭部item被點擊
	* */
	$('.tab--card--header--item').on('click', function (event) {
		/*
		* 如果當前item有active,不需要動,直接return
		* */
		if($(this).hasClass('active')) {
			return true;
		}
		var index = $(this).index();  // 當前被點擊的index下標
		var activeIndex = $(this).siblings('.active').index();  // 當前擁有active的index下標
		var direction = index > activeIndex ? 'right' : 'left'; // 項目應當從右還是從左劃進來?
		var contentItem = $('.tab--card--content--item').eq(index); // 需要劃進來的content item

		// 遍歷內容item 就是上面的content item
		$('.tab--card--content--item').each(function (i) {
			var zIndex = $(this).index() + 1; // zindex求為每個內容item下標+1
			if($(this).hasClass('active')) {  // 如果當前元素有active,那么就應該高一點zindex
				zIndex = 11;
			}
			$(this).css({zIndex: zIndex, transition: 'none'});  // 設置zindex,清空transition
		});
		contentItem.css({ // 先把要劃進來的content item的動畫前的坐標定位好,它的zindex要高于其他所有(包含當前擁有active)的item
			left: (direction === 'right' ? '100%' : '-100%'),
			zIndex: 22
		});
		setTimeout(function () {  // 下一次輪詢設置動畫和left的值
			contentItem.css({
				transition: 'left 0.3s ease',
				left: 0
			});
		}, 0);

		// 設置active
		$(this).addClass('active').css('width','40%').siblings().removeClass('active').css('width','20%');
		$('.sanjiao').css({
			left: 20+20*index + '%',
			width: 0+'%'}); // 三角動畫
		$('.tab--card--content--item').eq(index).addClass('active').siblings().removeClass('active');
	});
})
</script>
評論0
頭像

系統已開啟自動識別垃圾評論機制,識別到的自動封號,下載出錯或者資源有問題請聯系全棧客服QQ 416148489

1 2
重庆百变王牌app