Heim > Artikel > Web-Frontend > Teilen Sie einen Beispielcode, der H5 verwendet, um den Dropdown-Top-Zoom zu implementieren
style="max-width:90%"/>
Dieser Artikel enthält nur Designideen, d. h. jsFür den vollständigen Code laden Sie bitte die Demo herunter
Designideen:
1. Überwachen Sie das TouchstartEreignis des gesamten Dropdowns Bereich und zeichnen Sie die Werte für SeiteY und ClientY auf pageY sind gleich, wenn der Bildlauf beginnt, und implementieren schließlich die
Animation
content.addEventListener('touchstart',function (event) { var touch = event.touches[0]; startY = touch.pageY; clientY = touch.clientY; });
zu das Original und das Bild kehrt zum Original zurück
content.addEventListener('touchmove',function (event) { var touchs = event.touches[0]; //向上滚动,直接返回 if (touchs.pageY - startY <= 0 ) { return ; } //不相等,说明屏幕已经向上翻动,image不需要放大效果 if(startY != clientY){ return ; } var header = document.getElementById('headers'); //图片底部的容器高度+拖动的高度 header.style.height = 300 + touchs.pageY - startY +'px'; //图片放大比例 var scale = (touchs.pageY - startY ) / 300 + 1.0; //图片放大 imag.style.transform = "scale("+ scale +","+ scale +")"; });
Kostenloses h5-Online-Video-Tutorial
content.addEventListener('touchend',function (event) { event.preventDefault(); var touch = event.changedTouches[0]; var header = document.getElementById('headers'); header.style.height = 300 +'px'; imag.style.transform = "none"; console.log("滑动结束"); });
2.
HTML5-Vollversionshandbuchphp.cn Original-HTML5-Video-TutorialDas obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode, der H5 verwendet, um den Dropdown-Top-Zoom zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!