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 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
微信小程序实现watch监听
Jun 04 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
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
jQuery实现增删改查
2020/12/22 jQuery
Javascript实现打鼓效果
2021/01/29 Javascript
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python实现网页录音效果
2020/10/26 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
高校毕业生自我鉴定
2013/10/27 职场文书
开学典礼策划方案
2014/05/28 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
比较几种Redis集群方案
2021/06/21 Redis