这篇文章主要介绍利用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实现下拉顶部放大的案例的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。