Partagez un exemple de code qui utilise H5 pour implémenter le zoom supérieur déroulant

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

Application d'imitation déroulante zoom.gif

Cet article ne fournit que des idées de conception, c'est-à-dire jsCode. Pour le code complet, veuillez télécharger la démo
Idées de conception :

1 Surveillez l'événement touchstart de l'ensemble de la liste déroulante. zone et enregistrez les valeurs pageY et clientY

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

2. Surveillez l'événement touchmove de toute la zone et déterminez s'il monte ou descend, et si clientY et pageY. sont égaux lorsque le défilement commence, et enfin implémenter l'animation

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 +")";

});

3. Lorsque le glissement s'arrête, la tête vue passe à la. original, et l'image revient à l'original

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("滑动结束");

});

[Recommandations associées]

1 Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

3.Tutoriel vidéo HTML5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!