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

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机手指滑动切换图片特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery手机手指滑动切换图片特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

</head>
<body>
<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 src='js/stopExecutionOnTimeout.js?t=1'></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<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>
</body>
</html>

JS代码(stopExecutionOnTimeout.js):

"use strict";
	"object"!=typeof window.CP&&(window.CP={
}
),window.CP.PenTimer={
	programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{
}
,_loopTimers:{
}
,START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){
	this._loopExits[o]=!0}
,shouldStopLoop:function(o){
	if(this.programKilledSoStopMonitoring)return!0;
	if(this.programNoLongerBeingMonitored)return!1;
	if(this._loopExits[o])return!1;
	var t=this._getTime();
	if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;
	var i=t-this.timeOfFirstCallToShouldStopLoop;
	if(i<this.START_MONITORING_AFTER)return!1;
	if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;
	try{
	this._checkOnInfiniteLoop(o,t)}
catch(n){
	return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}
return!1}
,_sendErrorMessageToEditor:function(){
	try{
	if(this._shouldPostMessage()){
	var o={
	action:"infinite-loop",line:this._findAroundLineNumber()}
;
	parent.postMessage(JSON.stringify(o),"*")}
else this._throwAnErrorToStopPen()}
catch(t){
	this._throwAnErrorToStopPen()}
}
,_shouldPostMessage:function(){
	return document.location.href.match(/boomerang/)}
,_throwAnErrorToStopPen:function(){
	throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."}
,_findAroundLineNumber:function(){
	var o=new Error,t=0;
	if(o.stack){
	var i=o.stack.match(/boomerang\S+:(\d+):\d+/);
	i&&(t=i[1])}
return t}
,_checkOnInfiniteLoop:function(o,t){
	if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;
	var i=t-this._loopTimers[o];
	if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop:"+o}
,_getTime:function(){
	return+new Date}
}
,window.CP.shouldStopExecution=function(o){
	return window.CP.PenTimer.shouldStopLoop(o)}
,window.CP.exitedLoop=function(o){
	window.CP.PenTimer.exitedLoop(o)}
;

CSS代码(normalize.css):

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(styles.css):

*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;}
html,body{font-size:62.5%;}
body{background:#63BDF7;overflow:hidden;}
.demo{position:absolute;left:50%;top:50%;width:30.6rem;height:54rem;margin-left:-15.3rem;margin-top:-27rem;background:#F6F6F5;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.2);}
.demo__header{height:6rem;background:#002942;}
.demo__content{overflow:hidden;position:relative;height:48rem;padding-top:4.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.demo__card-cont{position:relative;width:24rem;height:32rem;margin:0 auto 5rem;}
.demo__card{z-index:2;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;}
.demo__card.reset{-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;-webkit-transform:translateX(0) !important;-ms-transform:translateX(0) !important;transform:translateX(0) !important;}
.demo__card.reset .demo__card__choice{-webkit-transition:opacity 0.3s;transition:opacity 0.3s;opacity:0 !important;}
.demo__card.inactive{-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;}
.demo__card.to-left{-webkit-transform:translateX(-30rem) rotate(-30deg) !important;-ms-transform:translateX(-30rem) rotate(-30deg) !important;transform:translateX(-30rem) rotate(-30deg) !important;}
.demo__card.to-right{-webkit-transform:translate(30rem) rotate(30deg) !important;-ms-transform:translate(30rem) rotate(30deg) !important;transform:translate(30rem) rotate(30deg) !important;}
.demo__card.below{z-index:1;}
.demo__card__top{height:20.5rem;padding-top:4rem;}
.demo__card__top.purple{background:#7132B9;}
.demo__card__top.blue{background:#248CB6;}
.demo__card__top.indigo{background:#303F9F;}
.demo__card__top.cyan{background:#26C6DA;}
.demo__card__top.lime{background:#AFB42B;}
.demo__card__top.brown{background:#795548;}
.demo__card__img{overflow:hidden;width:10rem;height:10rem;margin:0 auto 1.5rem;border-radius:50%;border:0.5rem solid #ffffff;background-image:url("../img/udTln22.png");background-size:cover;}
.demo__card__name{text-align:center;font-size:2rem;font-weight:bold;color:#fff;}
.demo__card__btm{height:11.5rem;background:#FFFFFF;}
.demo__card__we{text-align:center;font-size:2.2rem;line-height:11.5rem;}
.demo__card__choice{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;}
.demo__card__choice:before{content:"";position:absolute;left:50%;top:50%;width:2rem;height:2rem;margin-left:-1rem;color:#fff;border-radius:50%;box-shadow:-2rem -3rem #fff,2rem -3rem #fff;}
.demo__card__choice:after{content:"";position:absolute;left:50%;top:50%;width:4rem;height:1.5rem;margin-left:-2rem;border:0.6rem solid #fff;border-bottom:none;border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;}
.demo__card__choice.m--reject{background:#FF945A;}
.demo__card__choice.m--like{background:#B1DA96;}
.demo__card__choice.m--like:after{-webkit-transform:scaleY(-1);-ms-transform:scaleY(-1);transform:scaleY(-1);}
.demo__card__drag{z-index:5;position:absolute;left:0;top:0;width:100%;height:100%;cursor:-webkit-grab;cursor:grab;}
.demo__tip{text-align:center;font-size:2.2rem;}

附件:下载该文件资源,减少时间成本(增值服务)