移動手機APP手指滑動切換圖片特效附源碼下載
更新時間：2015年11月30日 14:49:24 作者：愛上程序猿
這篇文章主要介紹了移動手機APP手指滑動切換圖片特效附源碼下載的相關資料,需要的朋友可以參考下
這是一款效果非常炫酷的移動手機APP滑動手指切換圖片特效。該APP特效在移動手機中用戶可以通過手指的左右滑動來切換圖片，在桌面設備中通過鼠標也可達到同樣的效果。
使用方法
HTML結構
這個移動手機APP切換圖片特效的HTML結構采用嵌套<div>的HTML結構，每一張圖片卡片都包裹在div.demo__card中，里面放置了圖片，描述信息和一些額外的圖層。
<div class="demo__card"> <div class="demo__card__top brown"> <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>
m--reject是向左移動圖片時的圖層，m--like是向右移動圖片時的圖層，demo__card__drag是拖動層。
JavaScript
在jQuery代碼中，pullChange()函數(shù)用于設置向左和向右兩個滑動層的旋轉角度和透明度。release()函數(shù)用于判斷用戶是向左還是向右滑動手指，并為這些動作在DOM元素上添加相應的class。
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);
};
最后監(jiān)聽mousedown和touchstart事件，并對非.inactive的卡片元素執(zhí)行卡片切換操作。
使用方法
HTML結構
這個移動手機APP切換圖片特效的HTML結構采用嵌套<div>的HTML結構，每一張圖片卡片都包裹在div.demo__card中，里面放置了圖片，描述信息和一些額外的圖層。
<div class="demo__card"> <div class="demo__card__top brown"> <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>
m--reject是向左移動圖片時的圖層，m--like是向右移動圖片時的圖層，demo__card__drag是拖動層。
JavaScript
在jQuery代碼中，pullChange()函數(shù)用于設置向左和向右兩個滑動層的旋轉角度和透明度。release()函數(shù)用于判斷用戶是向左還是向右滑動手指，并為這些動作在DOM元素上添加相應的class。
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);
};
最后監(jiān)聽mousedown和touchstart事件，并對非.inactive的卡片元素執(zhí)行卡片切換操作。
$(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();
});
});
相關文章
Jqzoom是基于jquery的放大鏡效果插件，兼容多款瀏覽器，喜歡的朋友可以測試下。2010-04-04
Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過Ajax訪問XML數(shù)據(jù)，有需要的朋友可以參考一下2013-11-11
tuzhu_req.js 實現(xiàn)仿百度圖片首頁效果
這篇文章主要介紹了tuzhu_req.js 實現(xiàn)仿百度圖片首頁效果的相關資料,需要的朋友可以參考下2015-08-08
可以讓指定的層浮動到網(wǎng)頁上的任何位置，當滾動條滾動時它會保持在當前位置不變，不會產(chǎn)生閃動2008-12-12
使用jquery選擇器得到對應表單的jquery對象，然后使用attr方法修改對應的action,需要的朋友可以參考下2014-06-06
用jQuery來判斷瀏覽器的類型,主要是使用$.browser這個工具類2011-04-04
氣泡默認出現(xiàn)在觸發(fā)對象的正上方,當觸發(fā)對象在邊上時,氣泡會有一部分出現(xiàn)在窗口外面2010-05-05
這篇文章主要介紹了jQuery實現(xiàn)左側導航模塊的顯示與隱藏效果,涉及jQuery相應鼠標事件動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了使用JQuery自動完成插件Auto Complete詳解,使用JQuery自動完成插件，更新現(xiàn)有圖書列表頁面上的搜索，當用戶鍵入的時候立即顯示結果。,需要的朋友可以參考下2019-06-06
首頁有一個導航頁面要實現(xiàn)滾動效果，索性就仿造別人的效果自己做了一個，大體上還行，看起來還是比較流暢的,現(xiàn)滾動效果，腳本代碼如下，感興趣的朋友可以參考下2013-05-05