js实现⼿机web图⽚左右滑动效果
最近在做⼀个⼿机端web站点，⾥⾯有⼀个图⽚展⽰效果：
1、点击任意图⽚时图⽚全屏展⽰，左右滑动能展⽰其他的图⽚。
2、滑动超过⼀定范围⾃动滑到下⼀张图⽚，不超过则回退到当前照⽚位置。此处的滑动要带动画效果
实现：
每张图⽚外⾯⼀个div，将其宽度设置为100%，最外层有⼀个div[命名为outerDiv]，其宽度设为：总图⽚数量*100+‘%'。给最外层div设置touchstart,touchmove,touchend事件监听处理函数，在touchmove中根据移动的x轴距离动态改变outerDiv的x轴距离即可实现图⽚滑动效果，在touchend中根据当前滑动的距离判断滑动到下⼀张还是回退当前图⽚位置。
之前我们可以通过设置outerDiv的position属性，然后改变left值实现移动效果，这⾥我⽤的是css3的动画函数transform，简单，且可以实现动画效果
transform参数：
js控制css3动画触发-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');//移除动画效果，否则移动时图⽚会颤动
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(){
var TranslateX = touchOption.startTranslateX + veDistance;
$(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值
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。