css3和js实现重力感应(经测试,andriod4.2支持)
2016-04-28 08:41
330 查看
<img src="http://img1.wgsails.com/yuetaojie/slider/227/193/089/index/轻复古.jpg" id="imgLogo" alt=""> <p id="moCalcTiltLR"></p> <p id="moCalcTiltFB"></p> <script> function deviceMotionHandler(eventData) { // var acceleration = eventData.accelerationIncludingGravity; var facingUp = -1; if (acceleration.z > 0) { facingUp = +1; } var tiltLR = Math.round(((acceleration.x) / 9.81) * -90); var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp); document.getElementById("moCalcTiltLR").innerHTML = tiltLR; document.getElementById("moCalcTiltFB").innerHTML = tiltFB; var rotation = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB) + "deg)"; document.getElementById("imgLogo").style.webkitTransform = rotation; } // if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); }else{ alert('亲,你的浏览器不支持DeviceMotionEvent哦~'); } </script>
相关文章推荐
- CSS3新特性,兼容性,兼容方法总结
- CI 里去掉index.php 并 识别css js 文件 技巧
- 《CSS设计指南》笔记--HTML标记与文档结构
- CSS3 input 输入框蓝光特效
- 初识scss(1)
- 使用 stylelint检查CSS_StyleLint
- css 定位 float属性
- css div float属性
- css 定位
- 即将要被淘汰的兼容之--CSS Hack
- setStyleSheet来设定窗口部件的样式(前景色,背景图片)
- Footer固定在页面底部(CSS)
- CSS实现特殊背景效果
- CSS--百度百科
- Css文本
- Css框模型
- 详解css中relative,absolute,float用法
- Css列表
- 纯CSS实现各类气球泡泡对话框效果
- Css轮廓