Share an example code that uses H5 to implement drop-down top zoom-H5 Tutorial-php.cn

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

零下一度

Release： 2017-05-10 13:55:03

Original

3034 people have browsed it

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(&#39;touchstart&#39;,function (event) {
    var touch = event.touches[0];
    startY = touch.pageY;
    clientY = touch.clientY;    
});

Copy after login

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(&#39;touchmove&#39;,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 +")";

});

Copy after login

3. When the sliding stops, the headView changes to the original one, and the picture returns to its original state

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

});

Copy after login

【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!