H5 を使用してドロップダウンの上部ズームを実装するサンプル コードを共有する

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

模倣アプリのプルダウンzoom.gif

この記事では、デザインのアイデア、つまりjsコードのみを提供します。完全なコードについては、デモ
デザインをダウンロードしてください。アイデア:

1. ドロップダウン領域全体の Touchstart イベントを監視し、pageY と clientY の値を記録します

content.addEventListener('touchstart',function (event) {
    var touch = event.touches[0];
    startY = touch.pageY;
    clientY = touch.clientY;    
});

2. 領域全体の touchmove イベントを監視し、それが移動するかどうかを判断します。上か下か、スクロール開始時に clientY と pageY が等しいかどうか、最後にアニメーション

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 +")";

});

3. スライドが止まると、頭のviewが元に戻ります。

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("滑动结束");

});

[関連する推奨事項]

1. 無料の h5 オンラインビデオチュートリアル

2.

HTML5 完全版マニュアル

3. php.cn オリジナルの html5 ビデオチュートリアル

以上がH5 を使用してドロップダウンの上部ズームを実装するサンプル コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。