HTML5는 DeviceOrientation을 사용하여 흔들기 function_jquery를 구현합니다.

HTML5에는 기본 방향 및 모션 센서의 고급 캡슐화를 제공하는 DeviceOrientation이라는 중요한 기능이 있습니다. 이를 통해 중력 감지 및 나침반과 같은 흥미로운 기능을 쉽게 구현할 수 있습니다. 이 기사에서는 예제를 사용하여 HTML5의 중력 모션 및 방향 센서를 사용하여 휴대폰을 흔드는 효과를 얻는 방법을 소개합니다.

DeviceOrientation에는 두 가지 이벤트가 포함됩니다.

1. deviceOrientation: 방향 센서 데이터를 캡슐화하고 휴대폰의 각도, 방향, 방향 등 휴대폰이 정지되어 있을 때의 방향 데이터를 얻을 수 있는 이벤트입니다.
2. deviceMotion: 모션 센서 데이터를 캡슐화하여 휴대폰이 움직일 때 모션 가속도와 같은 데이터를 얻을 수 있는 이벤트입니다.

HTML

페이지에 악수 이미지를 배치하는 데 사용되는 div#hand가 있고, 악수 후 결과 정보를 표시하는 데 사용되는 div#result가 있습니다.

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div> 

CSS3를 사용하여 페이지 효과를 향상할 수 있으며, -webkit-animation 애니메이션 효과를 사용하여 수동으로 만든 이미지의 동적 효과를 얻을 수 있습니다. 자세한 내용을 보려면 소스 코드를 다운로드하세요.

자바스크립트

'흔들다'라는 동작은 '기기가 일정 시간 내에 일정 거리만큼 움직인다'는 뜻입니다. 따라서 일정 시간 범위 내에서 x, y, z축 값의 변화율은 devicemotion을 통해 장치의 흔들림을 모니터링하는 것은 장치의 흔들림이 있는지 확인하는 것입니다. 정상적인 움직임에 대한 오판단을 방지하기 위해서는 변화율에 대해 적절한 임계값을 설정해야 합니다.
우리는 HTML5용으로 캡슐화된 shake.js 코드를 사용하여 기기 흔들림, 프로젝트 주소를 확인합니다: https://github.com/alexgibson/shake.js.

<script src="shake.js"></script> 

먼저 Shake를 인스턴스화한 다음 장치 이동 모니터링을 시작하고, 장치 이동을 모니터링하고, 모니터링 결과(shakeEventDidOccur)를 콜백합니다.

window.onload = function() { 
  var myShakeEvent = new Shake({ 
    threshold: 15 
  }); 
 
  myShakeEvent.start(); 
 
  window.addEventListener('shake', shakeEventDidOccur, false); 
 
  function shakeEventDidOccur () { 
    var result = document.getElementById("result"); 
    result.className = "result"; 
    var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台']; 
    var num = Math.floor(Math.random()*4); 
    result.innerHTML = "恭喜，摇得"+arr[num]+"！"; 
    setTimeout(function(){ 
      result.className = "result result-show"; 
    }, 1000); 
  } 
}; 

여기서 shakeEventDidOccur() 함수를 사용자 정의할 수 있습니다. 이 예에서는 흔들린 결과가 반환되어 페이지에 표시됩니다. DEMO 데모를 참조하세요.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.