Teilen Sie einen Beispielcode, der H5 verwendet, um den Dropdown-Top-Zoom zu implementieren

style="max-width:90%"/>

Imitations-App-Pulldown-Zoom.gif

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

3. Wenn das Gleiten stoppt, wechselt die Kopfansicht

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(&#39;headers&#39;);
    //图片底部的容器高度+拖动的高度
    header.style.height = 300  + touchs.pageY - startY +&#39;px&#39;;
    //图片放大比例 
    var scale = (touchs.pageY - startY ) / 300 + 1.0;
    //图片放大
    imag.style.transform = "scale("+ scale +","+ scale +")";

});

[Verwandte Empfehlungen]1.

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-Vollversionshandbuch

3.

php.cn Original-HTML5-Video-Tutorial

Das 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!