height="484"/>

仿app下拉放大.gif

本文只提供設(shè)計(jì)思路,即js代碼.完整代碼,請(qǐng)下載demo
設(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)畫(huà)

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é)束");    });

【相關(guān)推薦】

1. 免費(fèi)h5在線視頻教程

2. HTML5 完整版手冊(cè)

3. php.cn原創(chuàng)html5視頻教程