移動(dòng)手機(jī)APP手指滑動(dòng)切換圖片特效附源碼下載
這是一款效果非常炫酷的移動(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í)行卡片切換操作。
使用方法
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í)行卡片切換操作。
$(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();
});
});
- JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁(yè)滑動(dòng)門菜單效果代碼
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- JS+CSS實(shí)現(xiàn)仿雅虎另類滑動(dòng)門切換效果
- JQuery實(shí)現(xiàn)簡(jiǎn)單的圖片滑動(dòng)切換特效
- jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
- 基于jQuery和hwSlider實(shí)現(xiàn)內(nèi)容左右滑動(dòng)切換效果附源碼下載（一）
- jQuery和hwSlider實(shí)現(xiàn)內(nèi)容響應(yīng)式可觸控滑動(dòng)切換效果附源碼下載（二）
相關(guān)文章
gridster.js是一款基于jquery的前端拖拽插件，效果相當(dāng)?shù)牟诲e(cuò)，大家可以先看看Demo(http://gridster.net/#intro)（藍(lán)色部分的白塊就是了，可以隨便拖動(dòng)，娛樂(lè)性很強(qiáng)）。2015-04-04
jQuery插件開(kāi)發(fā)的兩種方法及$.fn.extend的詳解
jQuery插件開(kāi)發(fā)分為兩種：1 類級(jí)別、2 對(duì)象級(jí)別，下面為大家詳細(xì)介紹下2014-01-01
jQuery 如何實(shí)現(xiàn)一個(gè)滑動(dòng)按鈕開(kāi)關(guān)
本文給大家分享一段jquery代碼實(shí)現(xiàn)滑動(dòng)按鈕開(kāi)關(guān)的效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的的朋友參考下2016-12-12
如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果
我們今天就一個(gè)具體的需求進(jìn)行分析，引出如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-09-09
jquery?操作DOM的基本用法分享，使用jquery的朋友可以參考下，方便以后對(duì)dom操作2012-04-04
jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)遮罩并高亮顯示效果
本文為大家詳細(xì)介紹下使用jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)遮罩高亮顯示效果，想必這種效果在網(wǎng)上大家都有見(jiàn)到過(guò)，下面是具體的示例，感興趣的各位可以參考下哈，希望對(duì)大家有所幫助2013-07-07
Jquery的val()方法不僅能夠設(shè)置元素的值，同時(shí)也能獲取元素的值。常見(jiàn)的操作是對(duì)文本框的操作，比如判斷郵箱地址等2012-06-06
從零開(kāi)始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)
我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯, 最常見(jiàn)的就是數(shù)組和對(duì)象的操作. jQuery工具函數(shù)為我們操作對(duì)象和數(shù)組提供了便利條件.2011-02-02
jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫廊效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫廊效果,實(shí)例分析了jquery帶縮略圖的全屏效果圖片實(shí)現(xiàn)技巧,并附有完整的源碼下載,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery的基本概念與高級(jí)編程的簡(jiǎn)單介紹，有需要的小伙伴可以參考下。2015-05-05