-1
我已發佈此問題，因爲我不知道從哪裏開始。我有25個相同位置的多個圖像，我需要根據移動位置從左到右的變化程度，在移動iPhone Safari瀏覽器上更改圖像。任何幫助，建議將非常感激。使用javascript更改移動旋轉上的圖像getmoju.com
我有一些代碼來獲得roration率： -
window.ondevicemotion = function(event) {
var accelerationX = event.accelerationIncludingGravity.x;
var accelerationY = event.accelerationIncludingGravity.y;
var accelerationZ = event.accelerationIncludingGravity.z;
}
我有很紮實example我正好需要的。
編輯： -
我嘗試過的一些代碼。
<script type="text/javascript">
var x = 0, y = 0,
vx = 0, vy = 0,
ax = 0, ay = 0;
var sphere = document.getElementById("sphere");
if (window.DeviceMotionEvent != undefined) {
window.ondevicemotion = function(e) {
ax = event.accelerationIncludingGravity.x * 10;
ay = event.accelerationIncludingGravity.y * 10;
}
setInterval(function() {
var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
if (landscapeOrientation) {
vx = vx + ay;
vy = vy + ax;
} else {
vy = vy - ay;
vx = vx + ax;
}
vx = vx * 0.98;
vy = vy * 0.98;
y = parseInt(y + vy/50);
x = parseInt(x + vx/50);
boundingBoxCheck();
document.getElementById("sphere").innerHTML = x;
sphere.style.right = y + "px";
sphere.style.left = x + "px";
var screenWidth=screen.width;
var imageCount=24;
var medianImageChange=screenWidth/imageCount;
var count=1;
for (i = 0; i > imageCount; i++) {
var medianImageChange=medianImageChange*count;
if((medianImageChange)<x || medianImageChange==x){
document.getElementById("innerHTML").innerHTML = '<img class="change'+count+'" id="change'+count+'" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_'+i+'.jpg" />';
}
count++;
}
}, 25);
}
function boundingBoxCheck(){
if (x<0) { x = 0; vx = -vx; }
if (y<0) { y = 0; vy = -vy; }
if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; }
if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; }
}
</script>
HTML： -
<div id="content">
<h1>Accelerometer Javascript Test</h1>
<div id="sphere"></div>
<div id="innerHTML"></div>
</div>
但情況並非如此，因爲我想任何人都可以幫我請。