dropDownbig

功能描述

页面下拉顶部图片放大,用例参见 dropDownbig.html

概述

模仿微博、抖音个人中心顶部下拉图片放大缩小效果,效果图如下

效果图

依赖的模块

./libs/dropDownbig.js

快速使用

本模块没有任何第三方,使用纯原生方法编写,代码也没有过度封装,很简单,刚入门学习的同学也看得懂。适合在此基础上根据自己的实际场景进行二次开发。

页面dom元素

<div class="header" id="headers">
    <img id="img" src="image/example.jpg" alt="">
</div>

通过以下css属性可以解决页面的抖动

* {
    touch-action: pan-y;
}
.header>img {
    transform: translateZ(0)
}

然后引入模块文件,就可以运行了,效果图如上

<script type="application/javascript" src="./libs/dropDownbig.js"></script>

实现原理

通过监听移动端的touchstarttouchmovetouchend事件,动态修改头部图片的大小,已达到图片放大缩小的效果。

dom.addEventListener('touchstart', function(event) {
    // 触摸事件开始
});
dom.addEventListener('touchmove', function(event) {
    // 接触点改变,滑动时
});
dom.addEventListener('touchend', function(event) {
    //     触摸结束,手指离开屏幕时
});

本模块在开发过程中遇到问题以及解决办法如下:

  • 头部滑动和页面滚动条冲突

    触摸时给页面body添加绝对定位,触摸事件接触移除绝对定位

  • 页面上滑时导致头部抖动

    因为使用了transform时间,导致了触摸时页面的抖动,通过给元素添加translateZ(0)以及页面设置*{touch-action: pan-y}解决页面抖动问题。

  • 如何做到只下拉头部元素时图片放大,页面其他内容下拉时不变

    只给头部元素添加`touch事件

  • 如何做到头部以下部分下拉也能触发图片放大事件

    给页面整体body和header分别添加和touch事件,注意preventDefault的运用

  • 其他可参见demo文件示例,基本发现的问题都已经解决了