资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

利用H5实现下拉顶部放大的案例-创新互联

这篇文章主要介绍利用H5实现下拉顶部放大的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司专注于铁力企业网站建设,自适应网站建设,电子商务商城网站建设。铁力网站建设公司,为铁力等地区提供建站服务。全流程定制网站,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

设计思路:

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实现下拉顶部放大的案例-创新互联
文章位置:http://www.cdkjz.cn/article/jehss.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220