Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie einen Beispielcode, der H5 verwendet, um den Dropdown-Top-Zoom zu implementieren

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

零下一度
零下一度Original
2017-05-10 13:55:033009Durchsuche

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(&#39;touchend&#39;,function  (event) {
    event.preventDefault();
    var touch = event.changedTouches[0];    
    var header = document.getElementById(&#39;headers&#39;);

    header.style.height = 300 +&#39;px&#39;;        
    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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn