ホームページ  >  記事  >  ウェブフロントエンド  >  H5 を使用してドロップダウンの上部ズームを実装するサンプル コードを共有する

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

零下一度
零下一度オリジナル
2017-05-10 13:55:033016ブラウズ

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

});

[関連する推奨事項]

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

2.

HTML5 完全版マニュアル

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。