PHP前端开发

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

百变鹏仔 2个月前 (10-18) #H5教程
文章标签 实例

/>

仿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(&#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 +")";});

3.当滑动停止的时候,头部视图变为原来的,图片恢复原样

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