我正在使用一些代码来处理基于智能手机陀螺仪值的HTML元素和CSS。我有这个div,我可以变得越来越大,这取决于我如何倾斜我的手机。但是,我不畏缩,我只想让它成长。我有什么想法可以做到这一点?我将保留下面的代码。 我的代码中的“gamma”只是捕获我设备的动作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>gyro.js - easy access to your web browsers built in accelerometer's and gyroscope's</title>
<style type="text/css">
#red {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
#example {
margin-top: 1000px;
}
</style>
</head>
<body>
<p = id="style"></p>
<p>gyro.getFeatures: <span id="features"></span></p>
<div id="red">Red</div>
<span id="example"></span>
<script src="js/gyro.js"></script>
<script>
gyro.startTracking(function(o) {
var k = document.getElementById('kittens'),
b = document.getElementById('style'),
f = document.getElementById('features'),
dw = o.gamma * 5,
percent = "%",
up = false;
f.innerHTML = gyro.getFeatures();
k.style.width = dw + percent;
b.innerHTML = k.style.width;
</script>
</body>
</html>