es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cambiar la imagen de fondo en dispositivos móviles cuando se detecta un cambio en el movimiento del dispositivo.

Cambiar la imagen de fondo en dispositivos móviles cuando se detecta un cambio en el movimiento del dispositivo.

26 May, 2023 Programación

Estoy intentando cambiar la imagen de fondo cuando cambia el movimiento del dispositivo móvil (como cuando mueves el dispositivo hacia arriba, abajo, izquierda o derecha). Estoy usando este código, pero el problema es que empieza a funcionar inmediatamente, incluso si no cambias el movimiento del dispositivo a mano. Siempre se actualiza en un bucle.

Lo que quiero es que cuando cambie un poco la posición del dispositivo móvil a la derecha, izquierda, arriba o abajo, se cambie la imagen. ¿Algún idea de cómo puedo hacerlo funcionar?

window.addEventListener("devicemotion", function(event) {
    if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma) {
        var myImages = new Array("victoria_bg.png", "victoria_bg_2.png", "victoria_bg_3.png", "victoria_bg_4.png");
        var random = myImages[Math.floor(Math.random() * myImages.length)];
        random = 'url(<?php echo base_url();?>resources/mobile/images/' + random + ')';
    }
});
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puedes usar el evento deviceorientation en lugar del evento devicemotion para detectar cambios en la orientación del dispositivo. También puedes usar el evento orientationchange para detectar cuando cambia la orientación del dispositivo.

    También puedes usar la propiedad window.orientation para detectar la orientación actual del dispositivo. Esta propiedad devolverá un valor de 0, 90, -90 o 180 dependiendo de la orientación del dispositivo.

    Luego puedes usar este valor para determinar qué imagen establecer como fondo. Por ejemplo:

    if (window.orientation === 0) {
    document.body.style.backgroundImage = 'url(<path-to-image-1>)';
} else if (window.orientation === 90) {
    document.body.style.backgroundImage = 'url(<path-to-image-2>)';
} else if (window.orientation === -90) {
    document.body.style.backgroundImage = 'url(<path-to-image-3>)';
} else if (window.orientation === 180) {
    document.body.style.backgroundImage = 'url(<path-to-image-4>)';
}</path-to-image-4></path-to-image-3></path-to-image-2></path-to-image-1>

Comments are closed.