移动手机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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
vue+iview实现文件上传
Nov 17 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
PHP定时更新程序设计思路分享
2014/06/10 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
canvas绘制七巧板
2017/02/03 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
vue ssr 指南详读
2018/06/29 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
回顾Javascript React基础
2019/06/15 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
Java如何支持I18N?
2016/10/31 面试题
小学教师评语大全
2014/04/23 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
养成教育经验材料
2014/05/26 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2014年维修工作总结
2014/11/22 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
win10下go mod配置方式
2021/04/25 Golang
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
python小型的音频操作库mp3Play
2022/04/24 Python