仿app下拉放大.gif
本文只提供設計思路,即js代碼.完整代碼,請下載demo
設計思路:
1.監(jiān)聽整個下拉區(qū)域的touchstart事件,并記錄下pageY和clientY值
content.addEventListener('touchstart',function (event) {
var touch = event.touches[0];
startY = touch.pageY;
clientY = touch.clientY;
});
2.監(jiān)聽整個區(qū)域的touchmove 事件,并判斷是上移還是下移,以及滾動開始時,clientY和pageY是否相等,最后實現(xiàn)動畫
content.addEventListener('touchmove',function (event) {
var touchs = event.touches[0];
//向上滾動,直接返回
if (touchs.pageY - startY <= 0 ) {
return ;
}
//不相等,說明屏幕已經(jīng)向上翻動,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.當滑動停止的時候,頭部視圖變?yōu)樵瓉淼?圖片恢復原樣
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("滑動結(jié)束");
});