recherche

Maison >interface Web >Tutoriel H5 >Comment implémenter la fonction shake via HTML5

Comment implémenter la fonction shake via HTML5

jacklove
jackloveoriginal
2018-06-09 10:04:082686parcourir

Principe : Utilisez DeviceMotion pour implémenter. Pour une introduction à DeviceMotion, vous pouvez consulter
https://developer.mozilla.org/en-US/docs/. Web/Reference/Events /devicemotion

Grâce à DeviceMotionEvent, vous pouvez obtenir les attributs x, y, z de accelerationIncludingGravity et déterminer si l'appareil est secoué en fonction de les changements dans les attributs x, y, z. L'événement de secousse s'est produit.

accelerationIncludeingGravity description :
L'accélération de l'appareil inclut l'effet de la gravité et peut être la seule valeur disponible sur les appareils qui n'ont pas de gyroscope à autoriser. pour supprimer correctement la gravité des données.

Le code est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">    
  <title> html5使用DeviceMotionEvent实现摇一摇 </title>
  <style type="text/css">
  .center{position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px; line-height:480px; text-align:center; font-size:100px; }
  .normal{background:#000000;}
  .normal .txt{color:#FFFFFF;}
  .doing{background:#FF0000;}
  .doing .txt{color:#FFFF00;}
  </style>
 </head>
 <body id="mybody" class="normal">
    <p id="txt" class="txt center">请执行摇一摇</p>
 </body>
 <script type="text/javascript">
    var doing = 0;  // 判断是否在动画显示中
    var speed = 23; // 定义摇动的速度数值
    var lastx = 0;    var lasty = 0;    var lastz = 0;    function handleMotionEvent(event) {
        var x = event.accelerationIncludingGravity.x;        var y = event.accelerationIncludingGravity.y;        var z = event.accelerationIncludingGravity.z;        if(doing==0){            if(Math.abs(x-lastx)>speed || Math.abs(y-lasty)>speed){
                doing = 1;
                show();
            }
        }
        lastx = x;
        lasty = y;
        lastz = z;
    }    function show(){
        document.getElementById(&#39;mybody&#39;).className = &#39;doing&#39;;
        document.getElementById(&#39;txt&#39;).innerHTML = &#39;执行了摇一摇&#39;;
        setTimeout(function(){
            doing=0; 
            document.getElementById(&#39;mybody&#39;).className=&#39;normal&#39;;
            document.getElementById(&#39;txt&#39;).innerHTML = &#39;请执行摇一摇&#39;;
        },3000);
    }
    window.addEventListener("devicemotion", handleMotionEvent, true); </script></html>

Cet article présente la fonction de secouer via html5 pour un contenu plus connexe. , veuillez suivre le site Web chinois php.

Recommandations associées :

Comment afficher et modifier l'auto_increment via MySql

Comment générer un raccourci sur le bureau Web via php Méthode

Utiliser js traversal pour obtenir des données dans le tableau


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!

Déclaration：
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
Article précédent：Implémentation d'un événement tactile HTML5 pour déterminer la direction du glissementArticle suivant：Implémentation d'un événement tactile HTML5 pour déterminer la direction du glissement

Articles Liés

Voir plus