html5重力感应

orientationchange判断屏幕翻转

window.orientation可以获取屏幕的方向

	var orientationTimmer = null;
	window.addEventListener(window[‘onorientationchange‘] ? ‘orientationchange‘ : ‘resize‘, function(){
       clearTimeout(orientationTimmer);

       orientationTimmer = setTimeout(function(){
       		if(window.orientation){
       			switch(window.orientation){
	       			case 90:
	       				alert(‘左旋‘)
	       				break;
	       			case -90:
	       				alert(‘右旋‘)
	       				break;
	       		}
       		}
       },200);

    }, false);

  

时间: 2024-08-02 00:37:26

html5重力感应的相关文章

HTML5重力感应小球冲撞动画实现教程

今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的效果,并且在运动过程中模拟了重力感应的物理效果.你可以在DEMO演示中来尝试一下. 你也可以在这里查看在线演示 接下来我们来分析一下这款超酷的HTML5重力动画实现的思路及源码,主要由HTML代码和Javascript代码组成. HTML代码: <div id="canvas">

H5案例分享:html5重力感应事件

html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转角度为α,并与先前的x和y轴位置对比,显示x,y轴新坐标为x0和y0. 2.设备围绕x轴的旋转角度为β,β角度的取值范围在(-180,180). 设备围绕x轴的旋转角度为β,并与先前的y和z轴的位置对比,显示y,z轴新坐标为y0和z0. 3.设备围绕y轴的旋转角度为γ,γ角度的取值范围在(-90,9

HTML5 重力感应效果,实现摇一摇效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detect

移动端html5重力感应

下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test.html 重力感应主要用到两种事件: 1 orientationchange 这个事件在屏幕发生翻转时触发 window.orientation可获得设备的方向,一共有三个值0:竖直,   90:右旋,   -90:左旋 2 deviceorientation 和 MozOrientation(fi

html5重力感应事件

if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } var speed = 30;//speed var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData) { var acceleration =event.accelerationIncl

html5 获取 陀螺仪,重力感应(转发)

DeviceOrientationEvent是获取方向,得到device静止时的绝对值:    DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比 设备定位API,该API允许你收集设备的方向和移动信息.此外,该API只在具备陀螺仪功能的设备上使用. <html> <head><title>DeviceOrientationEvent</title><meta charset="UTF-8&quo

HTML5+ 获取手机重力感应 ( 三个方向的加速度 )

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>手机重力感应</title> <script type=&q

进阶一之Android重力感应(一)

书山有路勤为径,学海无涯苦作舟. 本讲内容:Android重力感应 下面是三轴方向 android重力感应系统的坐标系以屏幕的左下方为原点([注意]2d编程的时候,是以屏幕左上方为原点的),箭头指向的方向为正.从-10到10,以浮点数为等级单位,想象一下以下情形: 手机屏幕向上(z轴朝天)水平放置的时侯,(x,y,z)的值分别为(0,0,10); 手机屏幕向下(z轴朝地)水平放置的时侯,(x,y,z)的值分别为(0,0,-10); 手机屏幕向左侧放(x轴朝天)的时候,(x,y,z)的值分别为(1

进阶二之Android重力感应(二)

路途再远也要一步步的走不止为了生存而是对其的热爱 本讲内容:Android重力感应 一.SensorMannager传感器管理对象 1.取得SensorMannager 手机中的所有传感器都须要通过SensorMannager来访问,调用getSystemService(SENSOR_SERVICE)方法就可以拿到当前手机的传感器管理对象. sm = (SensorManager) getSystemService(SENSOR_SERVICE); 2.取得Sensor目标各类的值(getSen