這篇文章主要介紹利用H5實(shí)現(xiàn)下拉頂部放大的案例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司專注于鐵力企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。鐵力網(wǎng)站建設(shè)公司,為鐵力等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

設(shè)計(jì)思路:

1.監(jiān)聽(tīng)整個(gè)下拉區(qū)域的touchstart事件,并記錄下pageY和clientY值

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

2.監(jiān)聽(tīng)整個(gè)區(qū)域的touchmove 事件,并判斷是上移還是下移,以及滾動(dòng)開(kāi)始時(shí),clientY和pageY是否相等,最后實(shí)現(xiàn)動(dòng)畫

content.addEventListener('touchmove',function  (event) {

    var touchs = event.touches[0];
      //向上滾動(dòng),直接返回
    if (touchs.pageY - startY <= 0 ) {
        return ;
    }
    //不相等,說(shuō)明屏幕已經(jīng)向上翻動(dòng),image不需要放大效果
    if(startY != clientY){
        return ;
    }

    var header = document.getElementById('headers');
    //圖片底部的容器高度+拖動(dòng)的高度
    header.style.height = 300  + touchs.pageY - startY +'px';
    //圖片放大比例 
    var scale = (touchs.pageY - startY ) / 300 + 1.0;
    //圖片放大
    imag.style.transform = "scale("+ scale +","+ scale +")";

});

3.當(dāng)滑動(dòng)停止的時(shí)候,頭部視圖變?yōu)樵瓉?lái)的,圖片恢復(fù)原樣

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("滑動(dòng)結(jié)束");

});

以上是利用H5實(shí)現(xiàn)下拉頂部放大的案例的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

標(biāo)題名稱：利用H5實(shí)現(xiàn)下拉頂部放大的案例-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/jehss.html