Comment faire glisser des images vers la gauche et la droite dans js

Cet article présente principalement en détail l'implémentation js de l'effet de glissement gauche et droit des images Web mobiles. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Je travaille actuellement sur un. site Web mobile. , il y a un effet d'affichage d'image :

1. Lorsque vous cliquez sur une image, l'image sera affichée en plein écran.
2. Si la diapositive dépasse une certaine plage, elle passera automatiquement à l'image suivante. Si la diapositive ne dépasse pas une certaine plage, elle reviendra à la position actuelle de la photo. L'effet de glissement ici doit être animé

Implémentation :

Il y a un p à l'extérieur de chaque image, définissez sa largeur à 100 % et il y a un p sur le calque le plus externe [ Nommé externalp], et sa largeur est définie sur : nombre total d'images * 100 + '%'. Définissez les fonctions de traitement d'écoute des événements touchstart, touchmove et touchend pour le p le plus externe. Dans touchmove, modifiez dynamiquement la distance de l'axe x de l'extérieur en fonction de la distance de l'axe x mobile pour obtenir l'effet de glissement de l'image. Dans touchend, déterminez le glissement. distance basée sur la distance de glissement actuelle. L'image suivante revient toujours à la position actuelle de l'image.

Avant, nous pouvions définir l'attribut de position de externalp, puis modifier la valeur de gauche pour obtenir l'effet de mouvement. Ici, j'utilise la fonction d'animation CSS3 transform, qui est simple et peut obtenir des effets d'animation

paramètre de transformation :

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

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

Définir le temps d'animation :

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

Code clé :

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

1. . touchmove

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);

3. touchend

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);

Résumé :

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

1. js. Il n'est pas nécessaire de le définir à l'avance2 Lors de l'utilisation de paramètres tels que translation(x,y), l'image vibrera lors du déplacement

3 Lors de l'utilisation de translationX() avec translationZ(0). l'image se déplacera normalement, sans translationZ( 0) Une vibration se produit également

4. Si le format de translationX(moveX) ranslateZ(0) est utilisé, si moveX utilise une valeur en pourcentage, telle que « 50 % », dans l'Android navigateur automatique pour téléphone portable et navigateur uc Il n'y a pas d'effet d'animation au milieu, et il est normal d'utiliser la valeur unitaire px

Afin d'éviter que l'image ne tremble pendant le mouvement et d'assurer l'effet d'animation, c'est Il est recommandé d'utiliser des paramètres tels que translateX(100px) ranslateZ(0) et d'utiliser la valeur px pour la distance de déplacement

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile. l'avenir.

Articles connexes :

Interprétation détaillée de la façon dont les fenêtres parent-enfant layui transmettent les paramètres

Comment implémenter l'adaptation d'image d'un composant d'image dans WeChat Affichage de l'applet

Problèmes liés à l'échec des requêtes inter-domaines dans VUE Mobile Music WEBAPP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!