jQuery滑动切换图片效果_触屏手机左右滑动Touch事件

本Demo是一个jQuery手机手指滑动切换图片的特效、是一款可以在移动终端上运行的程序、手机上用户可以通过手指的左右滑动来切换图片、在桌面设备中通过鼠标也可达到同样的效果、有图有真像

全局变量定义

var animating = false;
var cardsCounter = 0;
var numOfCards = 6;
var decisionVal = 80;
var pullDeltaX = 0;
var deg = 0;
var $card, $cardReject, $cardLike;

pullChange函数

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);
};

release函数

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();
	});
});

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1o6081yq 密码: tgdg