js实现手机web图片左右滑动效果
最近在做一个手机端web站点,里面有一个图片展示效果:
安次网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司自2013年起到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。
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值
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网页标题:js实现手机web图片左右滑动效果
文章链接:http://myzitong.com/article/jsdjig.html