js实现手机web图片左右滑动效果


Posted in Javascript onDecember 29, 2017

最近在做一个手机端web站点,里面有一个图片展示效果:

1、点击任意图片时图片全屏展示,左右滑动能展示其他的图片。
2、滑动超过一定范围自动滑到下一张图片,不超过则回退到当前照片位置。此处的滑动要带动画效果

实现:

每张图片外面一个div,将其宽度设置为100%,最外层有一个div[命名为outerDiv],其宽度设为:总图片数量*100+‘%'。给最外层div设置touchstart,touchmove,touchend事件监听处理函数,在touchmove中根据移动的x轴距离动态改变outerDiv的x轴距离即可实现图片滑动效果,在touchend中根据当前滑动的距离判断滑动到下一张还是回退当前图片位置。

之前我们可以通过设置outerDiv的position属性,然后改变left值实现移动效果,这里我用的是css3的动画函数transform,简单,且可以实现动画效果

transform参数:

-webkit-transform:translate(100px,200px) tr //可以设置x、y轴方向移动距离
-webkit-transform:translateX(100px) translateY(200px) translateZ(3000px) 

//可以设置x、y、z轴方向移动距离.3D效果
-webkit-transition:.4s ease;//设置动画时间

定义动画时间:

.transition {
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition: .4s ease;
  transition:.4s ease;
}

关键代码:

var touchOption={touchStartX:0,startTranslateX:0,moveDistance:0};

1、touchstart

outerDiv.addEventListener('touchstart',function(){
$(this).removeClass('transition');//移除动画效果,否则移动时图片会颤动
touchOption.touchStartX = e.touches[0].clientX;
        if ($(this).css("-webkit-transform") == 'none') {
          touchOption.startTranslateX = 0;
        }
        else {
          //css-webkit-transform属性值格式:matrix(1, 0, 0, 1, -4140, 0)
          var transfrom_info = $('.sourcePhotoDiv').css("-webkit-transform").split(',')[4];//获取当前outerDiv的x轴坐标
          touchOption.startTranslateX = parseInt(transfrom_info);
        }
},false);

2、touchmove

outerDiv.addEventListener('touchmove',function(){
       touchOption.moveDistance = (e.touches[0].clientX - touchOption.touchStartX);
        var TranslateX = touchOption.startTranslateX + touchOption.moveDistance;
        $(this).css('-webkit-transform', 'translateX('+ TranslateX +'px) translateZ(0)'); //移动图片
},false);

3、touchend

outerDiv.addEventListener('touchend',function(){
      $(this).addClass('transition);//添加动画效果
       var moveX=100;//此处计算移动移动下一张图片还是退货当前图片代码省略       
        $(this).css('-webkit-transform', 'translateX('+ moveX +'px) translateZ(0)'); //移动图片
},false);

总结:

1、outerDiv的动画参数和效果都是js动态添加的,不需要事先定义
2、用translate(x,y)这种参数时,图片移动时会颤动
3、用translateX() 且带translateZ(0)时图片移动正常,不带translateZ(0)同样出现颤动
4、如果用的是translateX(moveX) ranslateZ(0)这种格式,如果moveX用的是百分比值,如‘50%',在android手机自动浏览器和uc浏览器中则没有动画效果,用px单位值则正常

为防止图片移动过程颤动和保证动画效果,建议大家用translateX(100px) ranslateZ(0)这种参数,且移动距离用px值

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
Javascript学习笔记4 Eval函数
Jan 11 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
如何解决vue在ios微信"复制链接"功能问题
Mar 26 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 #Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 #Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 #Javascript
深入浅析vue组件间事件传递
Dec 29 #Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 #Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 #Javascript
node简单实现一个更改头像功能的示例
Dec 29 #Javascript
You might like
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
PyTorch中的C++扩展实现
2020/04/02 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
岗位职责的定义
2013/11/10 职场文书
上课打牌的检讨书
2014/02/15 职场文书
运动会广播稿20字
2014/02/18 职场文书
地理教师岗位职责
2014/03/16 职场文书
毕业评语大全
2014/05/04 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
求职自我评价范文100字
2014/09/23 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
工地食品安全责任书
2015/05/09 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python