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>

实现原理

通过监听移动端的touchstart、touchmove、touchend事件，动态修改头部图片的大小，已达到图片放大缩小的效果。

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文件示例，基本发现的问题都已经解决了

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24