分享一个利用H5实现下拉顶部放大的实例代码

height="484"/>

仿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('headers');      //图片底部的容器高度+拖动的高度      header.style.height = 300  + touchs.pageY - startY +'px';      //图片放大比例       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视频教程