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

2014-04-27 07:35:18 +08:00
 softempire
我想做一个小东西,微信里面,打开一个网页,然后手机晃动的时候,里面的图片跟着动(比如始终保持水平)

我想问一下,google的时候,这个东西是不是叫 重力感应 ?还是应该搜索其他的关键字? 谢谢
6775 次点击
所在节点    程序员
12 条回复
no13bus
2014-04-27 07:55:37 +08:00
微信里面?你得看看html5支不支持这个东西了
anheiyouxia
2014-04-27 08:13:11 +08:00
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访问会直接跳转。
shnjojo
2014-04-28 10:10:04 +08:00
ximan
2014-04-28 11:41:21 +08:00
docetism
2014-06-13 16:05:28 +08:00
@kokdemo 你对重力感应特性熟么?
kokdemo
2014-06-13 16:59:45 +08:00
@docetism ……浏览器的重力感应楼上都有写啊

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/110195

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX