本文主要包含H5，放大，实例等相关知识,匿名希望在学习及工作中可以帮助到您
height="484"/>仿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("滑动结束");
});【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. php.cn原创html5视频教程
以上就是分享一个利用H5实现下拉顶部放大的实例代码的详细内容，更多请关注微课江湖其它相关文章！