Maison > interface Web > Tutoriel H5 > le corps du texte

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

青灯夜游
Libérer: 2018-10-11 17:18:42
avant
4339 Les gens l'ont consulté

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 */
               }
        });
  }
Copier après la connexion

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 */
            }
    })
Copier après la connexion

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!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal