首页h5 android 重力晃动,H5案例分享：html5重力感应事件(示例代码)

h5 android 重力晃动,H5案例分享：html5重力感应事件(示例代码)

时间: 2023-11-26 17:03:25 浏览: 165

好的，我了解了您的问题。关于H5中重力感应事件的应用，以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>重力感应事件示例</title> <style> #box { background-color: #f00; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } </style> </head> <body> <div id="box"></div> <script> window.addEventListener('devicemotion', function(event) { var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z; document.getElementById("box").style.transform = "translate(" + (-x) + "px, " + y + "px)"; }, false); </script> </body> </html> ``` 这段代码中，我们通过监听 `devicemotion` 事件来获取设备的重力感应数据，然后将数据应用到页面元素上，实现元素的移动效果。在这个示例中，我们监听了 `x` 和 `y` 两个方向的重力感应数据，并将 `x` 方向的数据取反，以保证移动方向的正确性。您可以将手机横向或者竖向倾斜来测试这个示例。希望这个示例能够对您有所帮助！

阅读全文