Examples to explain js to realize left and right sliding of mobile web pictures

This article mainly introduces in detail how js can realize the left and right sliding effect of mobile web pictures. It has a certain reference value. Interested friends can refer to it. I hope it can help everyone.

Recently I am working on a mobile web site, which has a picture display effect:

1. When you click on any picture, the picture will be displayed in full screen. Swipe left and right to display other pictures.
2. If the slide exceeds a certain range, it will automatically slide to the next picture. If the slide does not exceed a certain range, it will return to the current photo position. The sliding effect here should be animated

Implementation:

There is a p outside each picture, set its width to 100%, and the outermost layer has A p [named outerp], its width is set to: total number of pictures * 100 + '%'. Set the touchstart, touchmove, and touchend event listening processing functions for the outermost p. In touchmove, dynamically change the x-axis distance of outerp according to the moving x-axis distance to achieve the picture sliding effect. In touchend, determine the sliding distance based on the current sliding distance. The next picture still returns to the current picture position.

Before we could set the position attribute of outerp and then change the left value to achieve the movement effect. Here I use the CSS3 animation function transform, which is simple and can achieve animation effects

transform parameters:

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

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

Define animation time:

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

Key code:

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

1、touchstart

##

outerp.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 = $('.sourcePhotop').css("-webkit-transform").split(',')[4];//获取当前outerp的x轴坐标
          touchOption.startTranslateX = parseInt(transfrom_info);
        }
},false);

2、touchmove

outerp.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

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

Summary:

1. The animation parameters and effects of outerp are dynamically added by js and do not need to be defined in advance.

2. When using parameters such as translate(x,y), the picture will vibrate when moving.
3. Use translateX( ) and with translateZ(0), the picture moves normally, but without translateZ(0), the picture also vibrates.
4. If the format of translateX(moveX) ranslateZ(0) is used, if moveX uses a percentage value, For example, '50%', there is no animation effect in the Android mobile phone automatic browser and UC browser, and the px unit value is normal.

In order to prevent jitter during the image movement and ensure the animation effect, it is recommended that you use translateX( 100px) ranslateZ(0) parameter, and the moving distance uses the px value

Related recommendations:

jQuery implementation code for sliding a group of pictures left and right after clicking _jquery

js implements the left and right sliding function of WeChat applet

Detailed explanation of WeChat applet sliding left and right to switch pages

The above is the detailed content of Examples to explain js to realize left and right sliding of mobile web pictures. For more information, please follow other related articles on the PHP Chinese website!