移动手机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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
轻松学习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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python/golang 删除链表中的元素
2020/09/14 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
UNIX文件类型
2013/08/29 面试题
教师党员思想汇报
2014/01/06 职场文书
给校长的一封建议书
2014/03/12 职场文书
快餐公司创业计划书
2014/04/29 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python