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