HTML5和CSS3开发经验

浏览数：25 / 时间：2015年06月09日

一、DeviceOrientation事件实现摇一摇功能

　　DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。

　　devicemotion：设备传感器事件 accelerationIncludingGravity：获取设备加速度信息（返回x、y、z轴）.

　　accelerationIncludingGravity：返回获取设备加速度信息，x、y、z轴

 1 <script>
 2     var SHAKE_THRESHOLD = 800;
 3     var last_update = 0;
 4     var x = y = z = last_x = last_y = last_z = 0;
 5 
 6     if (window.DeviceMotionEvent) {
 7 
 8         // DeviceMotion事件事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。
 9         window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
10     } else {
11         alert(‘本设备不支持devicemotion事件‘);
12     }
13 
14     function deviceMotionHandler(eventData) {
15         var acceleration = eventData.accelerationIncludingGravity;      // 返回获取设备加速度信息，x、y、z轴
16         var curTime = new Date().getTime();
17         if ((curTime - last_update) > 100) {
18             var diffTime = curTime - last_update;
19             last_update = curTime;
20             x = acceleration.x;
21             y = acceleration.y;
22             z = acceleration.z;
23             var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
24             var status = document.getElementById("status");
25             if (speed > SHAKE_THRESHOLD) {
26                 var text = "x:"+x+"<br />y:"+y+"<br />z:"+z+"<br />speed:"+speed;
27                 status.innerHTML = text;
28             }
29 
30             last_x = x;
31             last_y = y;
32             last_z = z;
33         }
34     }
35 </script>

二、动画侦听事件

　　CSS3动画结束后侦听动画，

　　1、transitionEnd：针对transition属性的动画

　　2、webkitAnimationEnd：针对animation属性的动画

1 <script>
2     $(".box").click(function(){
3         $(this).addClass("on");
4         $(this)[0].addEventListener("transitionend", function(){
5             $(".box").removeClass("on");
6         }, false);
7     })
8 </script>

三、常用事件

1、window.scrollTo(0,0);　　隐藏地址栏

2、window.matchMedia();　匹配媒体

3、navigator.connection; 决定手机是否运行在WiFi/3G等网络

4、window.devicePixelRatio; 决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5)

5、window.navigator.onLine; 取得网络连接状态

6、window.navigator.standalone; 决定iPhone是否处于全屏状态

7、touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

8、gesture事件 (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

window.addEventListener("orientationchange", function(e){ //window.orientation(0 is portrait, 90 and -90 are landscape) }, false); window.addEventListener("deviceorientation", function(e){ //e.alpha //e.beta //e.gamma }, false); window.addEventListener("devicemotion", function(e){ //e.accelerationIncludingGravity.x //e.accelerationIncludingGravity.y //e.accelerationIncludingGravity.z }, false);

9、requestAnimationFrame(); 新的动画函数

10、element.webkitRequestFullScreen(); 调用全屏函数