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

[softempire]

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

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

[no13bus]

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

[anheiyouxia]

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

[kokdemo]

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

[no13bus]

很棒

[pubby]

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

[monbai]

手机的 话性能要好


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]

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

[nor]

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

[shnjojo]

http://matthew.wagerfield.com/parallax/

[ximan]

前几天搜到的： http://blog.csdn.net/hfahe/article/details/7516317

[docetism]

@kokdemo 你对重力感应特性熟么?

[kokdemo]

@docetism ……浏览器的重力感应楼上都有写啊