<!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>移动手机APP滑动手指切换图片特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<article class="htmleaf-container">
<header class="htmleaf-header">
<h1>移动手机APP滑动手指切换图片特效</h1>
</header>
<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="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</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>
CSS3实现移动手机APP滑动手指切换图片特效源码.zip （11个子文件） 
132687013434174976 css3_appqh css 
default.css 6KB styles.css 4KB normalize.css 2KB img 
udTln22.png 25KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 7KB js stopExecutionOnTimeout.js 2KB jquery-2.1.1.min.js 82KB资源评论
易小侠
- 粉丝: 6622
- 资源: 9万+
