jQuery手机端手指滑动切换图片代码



90 359 120



特效描述: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

加群请备注:从官网了解到