我发布了这个问题，因为我不知道从哪里开始。我有25个相同位置的多个图像。我需要根据移动位置从左到右的变化程度在移动iphone safari浏览器上更改图像。任何帮助，建议将非常感谢。
我有代码来获得降价率： -
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>
但它没有发生，因为我想任何人都可以帮助我。
答案 0 :(得分：-1)
终于工作了一整天，我得到了自己的答案。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Move the Ball</title>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<script src="http://debug.phonegap.com/target/target-script-min.js#accelerometer"></script>
<style>
#no {
display: none;
}
.hide{display:none;}
#ball {
width: 20px;
height: 20px;
border-radius: 10px;
-webkit-radius: 10px;
background-color: red;
position:absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript" src="moju/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="content">
<h1>Move the Ball</h1>
<div id="yes">
<p>Move your device to move the ball. This sample is using Device Orientation and Motion API compatible with iOS since 4.2</p>
<p>Mantain your device in portrait orientation for better results (you can lock it)</p>
<div id="ball"></div>
</div>
<div id="no">
Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.
</div>
<div id="innerHTML">
<img class="hide imgsrc change1" id="change1" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_0.jpg" />
<img class="hide imgsrc change2" id="change2" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_1.jpg" />
<img class="hide imgsrc change3" id="change3" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_2.jpg" />
<img class="hide imgsrc change4" id="change4" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_3.jpg" />
<img class="hide imgsrc change5" id="change5" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_4.jpg" />
<img class="hide imgsrc change6" id="change6" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_5.jpg" />
<img class="hide imgsrc change7" id="change7" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_6.jpg" />
<img class="hide imgsrc change8" id="change8" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_7.jpg" />
<img class="hide imgsrc change9" id="change9" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_8.jpg" />
<img class="hide imgsrc change10" id="change10" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_9.jpg" />
<img class="hide imgsrc change11" id="change11" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_10.jpg" />
<img class="hide imgsrc change12" id="change12" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_11.jpg" />
<img class="hide imgsrc change13" id="change13" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_12.jpg" />
<img class="hide imgsrc change14" id="change14" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_13.jpg" />
<img class="hide imgsrc change15" id="change15" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_14.jpg" />
<img class="hide imgsrc change16" id="change16" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_15.jpg" />
<img class="hide imgsrc change17" id="change17" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_16.jpg" />
<img class="hide imgsrc change18" id="change18" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_17.jpg" />
<img class="hide imgsrc change19" id="change19" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_18.jpg" />
<img class="hide imgsrc change20" id="change20" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_19.jpg" />
<img class="hide imgsrc change21" id="change21" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_20.jpg" />
<img class="hide imgsrc change22" id="change22" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_21.jpg" />
<img class="hide imgsrc change23" id="change23" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_22.jpg" />
<img class="hide imgsrc change24" id="change24" width="250" height="250" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_23.jpg" /></div>
</div>
<script>
/*
Curious about the code? Great! Welcome to this code ;)
Feel free to copy and use this code
If you are going to blog or tweet about it or if you are going to create a better
code, please mantain the link to www.mobilexweb.com or @firt in Twitter.
*/
// Position Variables
var x = 0;
var y = 0;
// Speed - Velocity
var vx = 0;
var vy = 0;
// Acceleration
var ax = 0;
var ay = 0;
var delay = 10;
var vMultiplier = 1;
if (window.DeviceMotionEvent==undefined) {
document.getElementById("no").style.display="block";
document.getElementById("yes").style.display="none";
} else {
window.ondevicemotion = function(event) {
ax = event.accelerationIncludingGravity.x;
ay = event.accelerationIncludingGravity.y;
console.log("Accelerometer data - x: " + event.accelerationIncludingGravity.x + " y: " + event.accelerationIncludingGravity.y + " z: " +event.accelerationIncludingGravity.z);
}
setInterval(function() {
vy = vy + -(ay);
vx = vx + ax;
var ball = document.getElementById("ball");
y = parseInt(y + vy * vMultiplier);
x = parseInt(x + vx * vMultiplier);
if (x<0) { x = 0; vx = 0; }
if (y<0) { y = 0; vy = 0; }
if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = 0; }
if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = 0; }
ball.style.right = y + "px";
ball.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 degreeRotation=medianImageChange*count;
if(x>degreeRotation){
$( ".imgsrc" ).addClass( "hide" );
$( ".change"+count ).removeClass( "hide" );
}
count++;
}
}, delay);
}
</script>
</body>
</html>
可能对其他人有用。