欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-03 09:29:10
最近在做一个手机端web站点,里面有一个图片展示效果: 1、点击任意图片时图片全屏展示,左右滑动能展示其他的图片。 2、滑动超过一定范围自动滑到下一张图片,不超过则回退...

最近在做一个手机端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值

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