H5를 사용하여 드롭다운 상단 확대/축소를 구현하는 예제 코드 공유

style="max-width:90%"/>

이미테이션 앱 풀다운 Zoom.gif

이 글은 디자인 아이디어만 제공합니다. js코드 전체를 보려면 데모
디자인 아이디어를 다운로드하세요.

1. 전체 드롭다운의 touchstart이벤트를 모니터링하세요. 2. 전체 영역의 touchmove 이벤트를 모니터링하여 위 또는 아래로 이동하는지, clientY와 pageY가 동일한지 확인합니다. 스크롤이 시작되면 드디어

애니메이션

content.addEventListener('touchstart',function (event) {
    var touch = event.touches[0];
    startY = touch.pageY;
    clientY = touch.clientY;    
});

를 구현합니다. 3. 슬라이딩이 멈추면 헤드

뷰

가 원본으로 바뀌고, 사진이 원본으로 돌아갑니다

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(&#39;headers&#39;);
    //图片底部的容器高度+拖动的高度
    header.style.height = 300  + touchs.pageY - startY +&#39;px&#39;;
    //图片放大比例 
    var scale = (touchs.pageY - startY ) / 300 + 1.0;
    //图片放大
    imag.style.transform = "scale("+ scale +","+ scale +")";

});

【관련 추천】

1.

무료 h5 온라인 동영상 튜토리얼

2. 정식 버전 매뉴얼

3.

php .cn 원본 html5 비디오 튜토리얼

위 내용은 H5를 사용하여 드롭다운 상단 확대/축소를 구현하는 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!