首页 > 代码库 > HTML5和CSS3开发经验
HTML5和CSS3开发经验
一、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开发经验
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。