jQuery滑动切换图片效果_触屏手机左右滑动Touch事件
2015-10-26 09:51:52  By: dwtedx

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

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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+