首页 > 代码库 > HTML5和CSS3开发经验

HTML5和CSS3开发经验

2024-07-22 23:58:13   227人阅读

一、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(); 调用全屏函数

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML5和CSS3开发经验


联系
我们