分享一個利用H5實現下拉頂部放大的實例程式碼

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

仿app下拉放大.gif

本文只提供設計想法,即js程式碼.完整程式碼,請下載demo
設計想法:

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.當滑動停止的時候,頭部視圖變成原來的,圖片恢復原樣

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中文網其他相關文章！