在移动旋转时更改图像，例如 getmoju.com 和 javascript

Question

我已经发布了这个问题，因为我不知道从哪里开始。我有多个相同位置的图像，如 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>

但它并没有像我想要的那样发生任何人都可以帮助我。

Answer 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>

可能对其他人有用。

在移动旋转时更改图像，例如 getmoju.com 和 javascript

change image on mobile rotaion like getmoju.com with javascript

javascript

iphone

safari

angularjs