移动手机APP手指滑动切换图片特效附源码下载


Posted in Javascript onNovember 30, 2015

这是一款效果非常炫酷的移动手机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()函数用于设置向左和向右两个滑动层的旋转角度和透明度。release()函数用于判断用户是向左还是向右滑动手指,并为这些动作在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);
};

最后监听mousedown和touchstart事件,并对非.inactive的卡片元素执行卡片切换操作。

使用方法

 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()函数用于设置向左和向右两个滑动层的旋转角度和透明度。release()函数用于判断用户是向左还是向右滑动手指,并为这些动作在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);
};

最后监听mousedown和touchstart事件,并对非.inactive的卡片元素执行卡片切换操作。

$(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();
 });
});
Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 #Javascript
浅析node连接数据库(express+mysql)
Nov 30 #Javascript
javascript编程异常处理实例小结
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 #Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 #Javascript
基于javascript如何传递特殊字符
Nov 30 #Javascript
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python多线程使用方法实例详解
2019/12/30 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
爱心捐款倡议书范文
2014/05/12 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
优质护理服务心得体会
2016/01/22 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Python爬虫基础初探selenium
2021/05/31 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技