3

cada vez que se mueva el ratón horizontalmente en una imagen, la opacidad tiene que cambiar, es decir, si se mueve a la derecha 10px la opacidad aumenta 0.1, y si es a la izquierda disminuye 0.1. He usado el evento mousemove, para sacar el valor de la coordenada x. La pregunta es como puedo saber si aumenta o disminuye, tendría que tener el algún valor de x de la posición anterior para compararlo con la actual.

$("img").mousemove(function(event){
        // Posición absoluta horizontal del puntero menos la posición absoluta horizontal del elemento.
        var x = event.pageX - this.offsetLeft;
    });

1
  • 1
    debes almacenar las posicones lo mas facil seria crear un arreglo let postion=[0,0]; y ir actualizandolas cada vez que se mueve
    – Bryro
    Commented el 24 jun. 2019 a las 14:40

1 respuesta 1

3

Asi como dices, hay que guardar la variable de la posición anterior, he ir actualizándola, cada vez que pide el valor.

Notas:

  • Es necesario, iniciarlizar la variable anterior, y declararla fuera de la función.
  • Para la respuesta que te di, no use jquery como tu, si no, un evento de html: onmousemove

var anterior = 0;
var img = document.getElementById("img");
function aplicarOpacidad(event){
  var x = event.pageX - img.offsetLeft;
  
  img.style.opacity = x/img.offsetWidth;

  anterior = x;
};
#img{
  width:300px;
  height:300px;
  display:block;
  margin:auto;
}
<img id="img" src="https://dummyimage.com/1080x1024/000/fff" onmousemove="aplicarOpacidad(event);"
/>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.