Maison > interface Web > Tutoriel H5 > Exemples de code de développement mobile HTML5 pour le défilement et l'accélération inertielle

Exemples de code de développement mobile HTML5 pour le défilement et l'accélération inertielle

黄舟
Libérer: 2017-03-27 15:23:22
original
2217 Les gens l'ont consulté

1. Faites défiler Voici trois méthodes d'implémentation : 1) Utilisez le CSS natifattribut overflow: scroll p id= parent style = overflow:scroll; pid='content' content area/p /p Remarque : Il y a un bug dans android, il sera annulé après défilement Pour atteindre la zone de contenu supérieure, la solution est d'utiliser les deux dernières méthodes pour obtenir 2) des idées d'implémentation de programmation js : comparer les changements de position avant et après le déplacement du doigt sur l'écran pour modifier le contenu de l'élément de contenu

 1. Scroll

Voici trois méthodes d'implémentation :

1) Utilisez le débordement d'attribut CSS natif : scroll

<div id="parent" style="overflow:scroll;>
    <div id=&#39;content&#39;>内容区域</div>
</div>
Copier après la connexion

Remarque :

Il y a un bug dans Android. Après le défilement, il reviendra à la zone de contenu supérieure. La solution est d'utiliser les deux dernières méthodes pour implémenter

 2) la programmation js pour implémenter

Idée : comparez les changements de position avant et après le déplacement du doigt sur l'écran pour modifier le contenu de l'élément de contenu La position

La première étape : définissez le débordement du parent sur caché, définissez la position du contenu sur relative et haut sur 0 ;

Deuxième étape : écoutez l'événement tactile

var parent = document.getElementById(&#39;parent&#39;);

parent.addEventListener(&#39;touchstart&#39;, function(e) {
    // do touchstart
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
    // do touchmove
});
parent.addEventListener(&#39;touchend&#39;, function(e) {
    // do touchend
});
Copier après la connexion

Étape 3 : implémentez le code tournant

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById(&#39;parent&#39;);
var content = document.getElementById(&#39;content&#39;)
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置

parent.addEventListener(&#39;touchstart&#39;, function(e) {
    lastY = startY = e.touches[0].pageY;
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
    // 设置top值移动content
    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
    lastY = nowY;

});
parent.addEventListener(&#39;touchend&#39;, function(e) {
    // do touchend
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
    // 设置top值移动content
    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
    lastY = nowY;
});
Copier après la connexion

Étape 4 : optimisez

Ce qui précède le code fonctionne bien mieux sur un téléphone mobile que sur un PC

Partie optimisation Veuillez consulter :

 3) Utiliser le framework iScroll4

 var scroll = new iScroll(&#39;parent&#39;, {
  hScrollbar: false,
  vScrollbar: true,
  checkDOMChanges : true
  });
Copier après la connexion

 2. Assouplissement inertiel

Idée : prendre la dernière période de temps pendant laquelle le doigt glisse sur l'écran La vitesse moyenne v, laissez v changer selon une fonction décroissante jusqu'à ce qu'elle ne puisse plus bouger ou v<=0

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById(&#39;parent&#39;);
var content = document.getElementById(&#39;content&#39;)
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置

/**
 * 用于缓动的变量
 */
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false; // 是否停止缓动

parent.addEventListener(&#39;touchstart&#39;, function(e) {
    lastY = startY = e.touches[0].pageY;

    /**
     * 缓动代码
     */
    lastMoveStart = lastY;
    lastMoveTime = e.timeStamp || Date.now();
    stopInertiaMove = true;
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
    // 设置top值移动content
    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
    lastY = nowY;

    /**
     * 缓动代码
     */
    var nowTime = e.timeStamp || Date.now();
    stopInertiaMove = true;
    if(nowTime - lastMoveTime > 300) {
        lastMoveTime = nowTime;
        lastMoveStart = nowY;
    }
});
parent.addEventListener(&#39;touchend&#39;, function(e) {
    // do touchend
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
    var contentY = (parseInt(contentTop) + moveY);
    // 设置top值移动content
    content.style.top =  contentY + &#39;px&#39;;
    lastY = nowY;

    /**
     * 缓动代码
     */
    var nowTime = e.timeStamp || Date.now();
    var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); //最后一段时间手指划动速度
    stopInertiaMove = false;
    (function(v, startTime, contentY) {
        var dir = v > 0 ? -1 : 1; //加速度方向
        var deceleration = dir*0.0006;
        var duration = v / deceleration; // 速度消减至0所需时间
        var dist = v * duration / 2; //最终移动多少
        function inertiaMove() {
            if(stopInertiaMove) return;
            var nowTime = e.timeStamp || Date.now();
            var t = nowTime-startTime;
            var nowV = v + t*deceleration;
            // 速度方向变化表示速度达到0了
            if(dir*nowV < 0) {
                return;
            }
            var moveY = (v + nowV)/2 * t;
            content.style.top = (contentY + moveY) + "px";
            setTimeout(inertiaMove, 10);
        }
        inertiaMove();
    })(v, nowTime, contentY);
});
Copier après la connexion

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:php.cn
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