ホームページ > 記事 > ウェブフロントエンド > H5 を使用してドロップダウンの上部ズームを実装するサンプル コードを共有する
style="max-width:90%"/>
この記事では、デザインのアイデア、つまり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('headers'); //图片底部的容器高度+拖动的高度 header.style.height = 300 + touchs.pageY - startY +'px'; //图片放大比例 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("滑动结束"); });
[関連する推奨事項]
2. 3. php.cn オリジナルの html5 ビデオチュートリアル以上がH5 を使用してドロップダウンの上部ズームを実装するサンプル コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。