请教一下网页重力感应怎么做

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3900 天前的主题，其中的信息可能已经有所发展或是发生改变。

我想做一个小东西，微信里面，打开一个网页，然后手机晃动的时候，里面的图片跟着动（比如始终保持水平）

我想问一下，google的时候，这个东西是不是叫重力感应？还是应该搜索其他的关键字？谢谢

网页

感应

重力

12 条回复 • 2014-06-13 16:59:45 +08:00

no13bus

2014-04-27 07:55:37 +08:00

微信里面？你得看看html5支不支持这个东西了

anheiyouxia

2014-04-27 08:13:11 +08:00

http://chauvetxiao.com/bo-blog/read.php?30

kokdemo

2014-04-27 09:46:20 +08:00

我写过一个重力感应的2048
http://me.wocai.de/2048

no13bus

2014-04-27 13:05:13 +08:00

很棒

pubby

2014-04-27 15:27:25 +08:00

@kokdemo 手机chrome打开就停止响应了。

monbai

2014-04-27 16:20:33 +08:00

手机的话性能要好

window.onload= function(){
window.ondeviceorientation = function(e){
var div = document.getElementById("main");
if (e.beta < -65 && Math.abs(e.gamma)<15 )
{ update(1);};//屏幕上端向上
if (e.beta > 65 && Math.abs(e.gamma)<15 )
{ update(3);};//屏幕上端向下
if (Math.abs(e.beta) < 15 && e.gamma > 65 )
{ update(2);};//屏幕向右
if (Math.abs(e.beta) < 15 && e.gamma < -65 )
{ update(0);};//屏幕向左
};
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur () {
if (gameOver == true) {
restart();
} else{
event.preventDefault();
};

}

}

nor

2014-04-27 21:57:34 +08:00

网页重力感应主要用到了html5的两个特性deviceOrientation和deveicemotion。deviceOrientation可以结合手机判断东南西北，xyz轴移动的位置。而deveicemotion里面可以通过加速度的判断，实现摇一摇等功能。
给你两个DEMO，一起学习：
摇一摇变身 - http://cf.qq.com/act/a20140415mgmobile/
重力感应的视差滚动 - http://sy.qq.com/tga/2014/

nor

2014-04-27 21:59:12 +08:00

@nor 以上的两个DEMO最好生成二维码在手机里面查看，页面对终端判断了，PC访问会直接跳转。