分享一个利用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('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("滑动结束");

});

您可能感兴趣的文章：
分享一个利用H5实现下拉顶部放大的实例代码
H5最全面解读
Effective Go
HTML5的深入了解
分享利用HTML5实现图片压缩上传的实例代码
页面回到顶部的三种实现方法(锚标记，js)
返回顶端的js代码(纯文字版)
javascript 回到顶部示例
关于iphoneX 适配客户端H5页面的问题
使用h5实现输入框提示语和 正常文本框提示语的方法