style="max-width:90%"/>
仿app下拉放大.gif
本文只提供设计思路,即js代码.完整代码,请下载demo
设计思路:
1.监听整个下拉区域的touchstart事件,并记录下pageY和clientY值
1 2 3 4 5 | content.addEventListener('touchstart', function (event) {
var touch = event.touches[0];
startY = touch.pageY;
clientY = touch.clientY;
});
|
Salin selepas log masuk
2.监听整个区域的touchmove 事件,并判断是上移还是下移,以及滚动开始时,clientY和pageY是否相等,最后实现动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | content.addEventListener('touchmove', function (event) {
var touchs = event.touches[0];
if (touchs.pageY - startY <= 0 ) {
return ;
}
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 + ")" ;
});
|
Salin selepas log masuk
3.当滑动停止的时候,头部视图变为原来的,图片恢复原样
1 2 3 4 5 6 7 8 9 10 | 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( "滑动结束" );
});
|
Salin selepas log masuk
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. php.cn原创html5视频教程
Atas ialah kandungan terperinci 分享一个利用H5实现下拉顶部放大的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!