Beispiele zur Erläuterung von js, um das Verschieben mobiler Webbilder nach links und rechts zu realisieren

Dieser Artikel stellt hauptsächlich vor, wie js den linken und rechten Gleiteffekt von mobilen Webbildern realisieren kann. Ich hoffe, dass er jedem helfen kann.

Ich arbeite derzeit an einer mobilen Website, die einen Bildanzeigeeffekt hat:

1 Wenn Sie auf ein Bild klicken, wird das Bild im Vollbildmodus angezeigt nach rechts, um andere Bilder anzuzeigen.
2. Wenn das Dia einen bestimmten Bereich überschreitet, wird es automatisch zum nächsten Bild verschoben. Wenn das Dia einen bestimmten Bereich nicht überschreitet, kehrt es zur aktuellen Fotoposition zurück. Der Gleiteffekt muss hier animiert werden

Implementierung:

Außerhalb jedes Bildes befindet sich ein p, dessen Breite ist auf 100 % eingestellt, und die äußerste Ebene hat Ein p [benannter äußerer P], seine Breite ist eingestellt auf: Gesamtzahl der Bilder * 100 + '%'. Legen Sie die Touchstart-, Touchmove- und Touchend-Ereignisverarbeitungsfunktionen für das äußerste p fest. Ändern Sie in touchmove dynamisch den x-Achsenabstand von externalp entsprechend dem bewegten x-Achsenabstand, um den Bildgleiteffekt zu erzielen Die Distanz wird auf der Grundlage der aktuellen Schiebedistanz verschoben. Das nächste Bild kehrt immer noch zur aktuellen Bildposition zurück.

Bevor wir das Positionsattribut von Outerp festlegen und dann den linken Wert ändern konnten, um den Bewegungseffekt zu erzielen, verwende ich hier die CSS3-Animationsfunktionstransformation, die einfach ist und Animationseffekte erzielen kann

Transformationsparameter:

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

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

Animationszeit definieren:

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

Schlüsselcodes:

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

Zusammenfassung:

1. Die Animationsparameter und Effekte von Outerp werden dynamisch von js hinzugefügt und müssen nicht im Voraus definiert werden.

2 als Translate(x,y), das Bild Das Bild vibriert, wenn es sich bewegt
3 Bei Verwendung von TranslateX() mit TranslateZ(0) bewegt sich das Bild normal, aber ohne TranslateZ(0) vibriert das Bild ebenfalls
4. Wenn Sie in diesem Format translatorX(moveX) ranslateZ(0) verwenden, wird empfohlen, Parameter wie translatorX(100px) ranslateZ(0) und zu verwenden, um Vibrationen zu verarbeiten und Animationseffekte sicherzustellen Verwenden Sie den px-Wert für die Bewegungsdistanz

Verwandte Empfehlungen:

jQuery-Implementierungscode zum Verschieben nach links und rechts nach dem Klicken auf eine Gruppe von Bildern_jquery

js implementiert die Links- und Rechts-Schiebefunktion des WeChat-Miniprogramms

Detaillierte Erklärung der Links- und Rechts-Schiebefunktion des WeChat-Miniprogramms Seite wechseln

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung von js, um das Verschieben mobiler Webbilder nach links und rechts zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!