快捷導(dǎo)航

移動(dòng)手機(jī)APP手指滑動(dòng)切換圖片特效附源碼下載

更新時(shí)間：2015年11月30日 14:49:24 作者：愛(ài)上程序猿

這篇文章主要介紹了移動(dòng)手機(jī)APP手指滑動(dòng)切換圖片特效附源碼下載的相關(guān)資料,需要的朋友可以參考下

這是一款效果非常炫酷的移動(dòng)手機(jī)APP滑動(dòng)手指切換圖片特效。該APP特效在移動(dòng)手機(jī)中用戶可以通過(guò)手指的左右滑動(dòng)來(lái)切換圖片，在桌面設(shè)備中通過(guò)鼠標(biāo)也可達(dá)到同樣的效果。

效果演示源碼下載

使用方法

HTML結(jié)構(gòu)

這個(gè)移動(dòng)手機(jī)APP切換圖片特效的HTML結(jié)構(gòu)采用嵌套<div>的HTML結(jié)構(gòu)，每一張圖片卡片都包裹在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是向左移動(dòng)圖片時(shí)的圖層，m--like是向右移動(dòng)圖片時(shí)的圖層，demo__card__drag是拖動(dòng)層。

JavaScript

在jQuery代碼中，pullChange()函數(shù)用于設(shè)置向左和向右兩個(gè)滑動(dòng)層的旋轉(zhuǎn)角度和透明度。release()函數(shù)用于判斷用戶是向左還是向右滑動(dòng)手指，并為這些動(dòng)作在DOM元素上添加相應(yīng)的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)聽(tīng)mousedown和touchstart事件，并對(duì)非.inactive的卡片元素執(zhí)行卡片切換操作。