Exemples pour expliquer js pour réaliser le glissement vers la gauche et la droite des images Web mobiles

Cet article présente principalement en détail comment js peut réaliser l'effet de glissement vers la gauche et la droite 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, qui a un effet d'affichage d'image :

1. Lorsque vous cliquez sur une image, l'image sera affichée en plein écran et faites glisser votre doigt vers la gauche. droit d’afficher d’autres images.
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 le calque le plus externe a A p [nommé externalp], 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;
}

Codes clés :

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. toucherdéplacer

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

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

Résumé :

1. Les paramètres d'animation et les effets d'outerp sont ajoutés dynamiquement par js, et il n'est pas nécessaire de les définir à l'avance
2. comme Translate(x,y), l'image L'image vibrera lors du déplacement
3. Lorsque vous utilisez TranslateX() avec TranslateZ(0), l'image se déplacera normalement. Sans TranslateZ(0), l'image vibrera également <.> 4. Si vous utilisez translateX(moveX) ranslateZ(0) Dans ce format, si le move Pour traiter les vibrations et assurer les effets d'animation, 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

Recommandations associées :

jQuery Code d'implémentation pour glisser vers la gauche et la droite après avoir cliqué sur un groupe d'images_jquery

js implémente la fonction de glissement vers la gauche et la droite du mini programme WeChat

Explication détaillée du glissement vers la gauche et la droite du mini programme WeChat Changer de page

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!