听说,HTML5和手机传感器更配哦!手机DEMO

yuanoook
yuanoook 发布于 2016-05-11 22:40:50 浏览:4067 类型:原创 - 随笔 分类:JavaScript - 待整理 二维码: 作者原创 版权保护
一个真的demo
但是里面的图片有 2-3M,所以咯,要有点耐心才能打开。
图片是高清无码,但是效果有点 low。
听说,HTML5和手机传感器更配哦!手机DEMO
原理:
监听手机的设备方向传感器,转化为 background position 的百分比。

蛮好玩,核心代码:
window.DeviceOrientationEvent && window.addEventListener("deviceorientation", function (event) {
    document.body.style.backgroundPosition = inRange(event.gamma/.45+50,0,100)+'% ' + inRange((event.beta-45)/.45+50,0,100)+'%';
});

function inRange(res,min,max){
    res = res>max ? max : res;
    res = res<min ? min : res;
    return res;
}


Demo 的全量代码就不附上了,因为pc端的演示也看不出效果。
参考资料:
https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent
https://w3c.github.io/deviceorientation/spec-source-orientation.html
z
给个赞 20 人点赞
收藏 24 人收藏
评论 已有 7 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
suxiaomei_y
suxiaomei_y2016-05-16 10:50:415F
就怕两种动物,蛇和狗,差点被蛇咬,被狗咬到过!emoticon //@yuanoook:有两张图,一张是蛇,一张是黑豹。你肯定看到蛇了,哈哈 //@suxiaomei_y:吓死人了,不带这么玩的!
举报 支持 (1) 回复 (1)
suxiaomei_y
suxiaomei_y2016-05-13 10:08:433F
吓死人了,不带这么玩的!
举报 支持 (1) 回复 (1)
永久指针oO
永久指针oO2016-05-19 10:07:116F
赞,配合z轴和3d旋转可以做出裸眼3d的效果!打开了新世界的大门emoticon
举报 支持 (1) 回复 (0)
994399414
9943994142016-05-12 13:54:492F
图片太吓人了,跟真的一样!
举报 支持 (1) 回复 (0)
在寂寞中季节
在寂寞中季节2016-05-12 09:21:591F
有点意思.收藏备用
举报 支持 (1) 回复 (0)
最新评论
yuanoook
yuanoook2016-05-19 10:12:047F
不错,有想法emoticon //@suxiaomei_y:就怕两种动物,蛇和狗,差点被蛇咬,被狗咬到过!emoticon //@yuanoook:有两张图,一张是蛇,一张是黑豹。你肯定看到蛇了,哈哈 //@suxiaomei_y:吓死人了,不带这么玩的!
举报 支持 (0) 回复 (0)
永久指针oO
永久指针oO2016-05-19 10:07:116F
赞,配合z轴和3d旋转可以做出裸眼3d的效果!打开了新世界的大门emoticon
举报 支持 (1) 回复 (0)
suxiaomei_y
suxiaomei_y2016-05-16 10:50:415F
就怕两种动物,蛇和狗,差点被蛇咬,被狗咬到过!emoticon //@yuanoook:有两张图,一张是蛇,一张是黑豹。你肯定看到蛇了,哈哈 //@suxiaomei_y:吓死人了,不带这么玩的!
举报 支持 (1) 回复 (1)
yuanoook
yuanoook2016-05-13 19:08:384F
有两张图,一张是蛇,一张是黑豹。你肯定看到蛇了,哈哈 //@suxiaomei_y:吓死人了,不带这么玩的!
举报 支持 (0) 回复 (1)
suxiaomei_y
suxiaomei_y2016-05-13 10:08:433F
吓死人了,不带这么玩的!
举报 支持 (1) 回复 (1)
994399414
9943994142016-05-12 13:54:492F
图片太吓人了,跟真的一样!
举报 支持 (1) 回复 (0)
在寂寞中季节
在寂寞中季节2016-05-12 09:21:591F
有点意思.收藏备用
举报 支持 (1) 回复 (0)
yuanoook yuanoook 作者

享受平凡 | 追求卓越

作者最新