Implémentation de la page de saut coulissante H5 (exemple de code)

Cet article vous présentera la mise en œuvre de la page de saut coulissante H5. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Méthode 1 :

Méthode jquery

movePage($('body'));
   function movePage(dom) {
       var startY, moveY, moveSpave;
       dom.on("touchstart", function(e) {
               startY = e.originalEvent.touches[0].pageY; return startY;
        });
        dom.on("touchmove", function(e) {
              moveY = e.originalEvent.touches[0].pageY;
              moveSpave = startY - moveY;
              if (moveSpave > 15) {
                   location.href = 'main.html';              /* 跳转到main.html */
               }
        });
  }

Méthode 2 :

Méthode native

     var strat,move,num; /*定义三个变量, 记录开始、结束距离顶部的距离*/
     p_demo.addEventListener("touchstart", function (e){        /*触摸开始*/
            console.log("触摸开始")
            // console.log(e)
            start = e.touches[0].pageY;
            console.log(start)       /*得出刚触屏时距离页面顶部的距离*/
      })
     p_demo.addEventListener("touchmove", function (e){       /*触摸移动*/
            console.log("触摸移动")
            // console.log(e)
            move = e.touches[0].pageY;
            console.log(move)     /*得出触屏结束后距离页面顶部的距离*/
    }) 
   p_demo.addEventListener("touchend", function (e){            /*触摸结束*/
            console.log("触摸结束")
            // console.log(e)
            num = start - move ;   /*得出开始和结束距离页面顶部的差值*/
            if(num>15){
                 location.href="main.html"           /* 跳转到main.html */
            }
    })

Résumé : Ce qui précède Nous espérons que l'ensemble du contenu de cet article sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML5, le Tutoriel vidéo jQuery !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique HTML5

Manuel HTML5 en ligne

Collection de codes d'effets spéciaux HTML5

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!