jQuery手機端手指滑動切換圖片代碼



95 376 126



特效描述:jQuery手機端 手指滑動 切換圖片代碼,jQuery手機端手指滑動切換圖片代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

2. 引入JS

<script src='js/stopExecutionOnTimeout.js?t=1'></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

3. HTML代碼

<article class="htmleaf-container">
	<div class="demo">
	  <header class="demo__header"></header>
	  <div class="demo__content">
		<div class="demo__card-cont">
		  <div class="demo__card">
			<div class="demo__card__top brown">
			  <div class="demo__card__img"></div>
			  <p class="demo__card__name">Hungry cat 6</p>
			</div>
			<div class="demo__card__btm">
			  <p class="demo__card__we">Whatever</p>
			</div>
			<div class="demo__card__choice m--reject"></div>
			<div class="demo__card__choice m--like"></div>
			<div class="demo__card__drag"></div>
		  </div>
		  <div class="demo__card">
			<div class="demo__card__top lime">
			  <div class="demo__card__img"></div>
			  <p class="demo__card__name">Hungry cat 5</p>
			</div>
			<div class="demo__card__btm">
			  <p class="demo__card__we">Whatever</p>
			</div>
			<div class="demo__card__choice m--reject"></div>
			<div class="demo__card__choice m--like"></div>
			<div class="demo__card__drag"></div>
		  </div>
		  <div class="demo__card">
			<div class="demo__card__top cyan">
			  <div class="demo__card__img"></div>
			  <p class="demo__card__name">Hungry cat 4</p>
			</div>
			<div class="demo__card__btm">
			  <p class="demo__card__we">Whatever</p>
			</div>
			<div class="demo__card__choice m--reject"></div>
			<div class="demo__card__choice m--like"></div>
			<div class="demo__card__drag"></div>
		  </div>
		  <div class="demo__card">
			<div class="demo__card__top indigo">
			  <div class="demo__card__img"></div>
			  <p class="demo__card__name">Hungry cat 3</p>
			</div>
			<div class="demo__card__btm">
			  <p class="demo__card__we">Whatever</p>
			</div>
			<div class="demo__card__choice m--reject"></div>
			<div class="demo__card__choice m--like"></div>
			<div class="demo__card__drag"></div>
		  </div>
		  <div class="demo__card">
			<div class="demo__card__top blue">
			  <div class="demo__card__img"></div>
			  <p class="demo__card__name">Hungry cat 2</p>
			</div>
			<div class="demo__card__btm">
			  <p class="demo__card__we">Whatever</p>
			</div>
			<div class="demo__card__choice m--reject"></div>
			<div class="demo__card__choice m--like"></div>
			<div class="demo__card__drag"></div>
		  </div>
		  <div class="demo__card">
			<div class="demo__card__top purple">
			  <div class="demo__card__img"></div>
			  <p class="demo__card__name">Hungry cat</p>
			</div>
			<div class="demo__card__btm">
			  <p class="demo__card__we">Whatever</p>
			</div>
			<div class="demo__card__choice m--reject"></div>
			<div class="demo__card__choice m--like"></div>
			<div class="demo__card__drag"></div>
		  </div>
		</div>
		<p class="demo__tip">Swipe left or right</p>
	  </div>
	</div>
</article>
<script>
$(document).ready(function () {
	var animating = false;
	var cardsCounter = 0;
	var numOfCards = 6;
	var decisionVal = 80;
	var pullDeltaX = 0;
	var deg = 0;
	var $card, $cardReject, $cardLike;
	function pullChange() {
		animating = true;
		deg = pullDeltaX / 10;
		$card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
		var opacity = pullDeltaX / 100;
		var rejectOpacity = opacity >= 0 ? 0 : Math.abs(opacity);
		var likeOpacity = opacity <= 0 ? 0 : opacity;
		$cardReject.css('opacity', rejectOpacity);
		$cardLike.css('opacity', likeOpacity);
	}
	;
	function release() {
		if (pullDeltaX >= decisionVal) {
			$card.addClass('to-right');
		} else if (pullDeltaX <= -decisionVal) {
			$card.addClass('to-left');
		}
		if (Math.abs(pullDeltaX) >= decisionVal) {
			$card.addClass('inactive');
			setTimeout(function () {
				$card.addClass('below').removeClass('inactive to-left to-right');
				cardsCounter++;
				if (cardsCounter === numOfCards) {
					cardsCounter = 0;
					$('.demo__card').removeClass('below');
				}
			}, 300);
		}
		if (Math.abs(pullDeltaX) < decisionVal) {
			$card.addClass('reset');
		}
		setTimeout(function () {
			$card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');
			pullDeltaX = 0;
			animating = false;
		}, 300);
	};
	$(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {
		if (animating)
			return;
		$card = $(this);
		$cardReject = $('.demo__card__choice.m--reject', $card);
		$cardLike = $('.demo__card__choice.m--like', $card);
		var startX = e.pageX || e.originalEvent.touches[0].pageX;
		$(document).on('mousemove touchmove', function (e) {
			var x = e.pageX || e.originalEvent.touches[0].pageX;
			pullDeltaX = x - startX;
			if (!pullDeltaX)
				return;
			pullChange();
		});
		$(document).on('mouseup touchend', function () {
			$(document).off('mousemove touchmove mouseup touchend');
			if (!pullDeltaX)
				return;
			release();
		});
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子