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

WBOY
풀어 주다: 2016-05-16 15:56:26
원래의
1297명이 탐색했습니다.

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 데모를 참조하세요.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿