Share an example code that uses H5 to implement drop-down top zoom

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

Imitation app drop-down zoom.gif

This article only provides design ideas, that is, jsCode. For complete code, please download the demo
Design ideas:

1. Monitor the touchstart event of the entire drop-down area, and record the pageY and clientY values

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

2. Listen to the touchmove event of the entire area, and determine whether to move up or down, and whether clientY and pageY are equal when the scroll starts, and finally implement animation

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. When the sliding stops, the headView changes to the original one, and the picture returns to its original state

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

});

【Related recommendations 】

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php .cn original html5 video tutorial

The above is the detailed content of Share an example code that uses H5 to implement drop-down top zoom. For more information, please follow other related articles on the PHP Chinese website!