So verschieben Sie Bilder in js nach links und rechts

Dieser Artikel stellt hauptsächlich die js-Implementierung des linken und rechten Gleiteffekts von mobilen Webbildern vor. Er hat einen gewissen Referenzwert.

Ich arbeite derzeit daran Auf der mobilen Website gibt es einen Bildanzeigeeffekt:

1. Wenn Sie auf ein Bild klicken, wird das Bild im Vollbildmodus angezeigt.
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, stellen Sie seine Breite auf 100 % ein und auf der äußersten Ebene befindet sich ein p [ Mit dem Namen „outerp“] und seine Breite ist auf Folgendes festgelegt: 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 Der Abstand wird auf der Grundlage des aktuellen Schiebeabstands 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-Animationsfunktion transform, 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;
}

Tastencode:

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. Verwenden Sie Translate( x, y), das Bild vibriert, wenn es sich bewegt
3. Wenn Sie TranslateX() mit TranslateZ(0) verwenden, wird das Bild auch normal vibrieren
4. Wenn das Format „translateX(moveX) ranslateZ(0)“ ist, gibt es im automatischen Browser des Android-Mobiltelefons und im UC-Browser keinen Animationseffekt. und es ist normal, wenn der px-Einheitswert verwendet wird.

Um Jitter während der Bildbewegung zu verhindern und Animationseffekte sicherzustellen, wird empfohlen, Parameter wie translatorX(100px) ranslateZ(0) zu verwenden. und verwenden Sie px-Werte für die Bewegungsentfernung

Das Obige habe ich für Sie zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Detaillierte Interpretation, wie Laui-Eltern-Kind-Fenster Parameter übergeben

So implementieren Sie die Bildanpassung von Bildkomponenten in WeChat Applet-Anzeige

Probleme im Zusammenhang mit fehlgeschlagenen domänenübergreifenden Anfragen in VUE Mobile Music WEBAPP

Das obige ist der detaillierte Inhalt vonSo verschieben Sie Bilder in js nach links und rechts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!