Este artículo le presentará cómo implementar imágenes en js para seguir el movimiento del mouse. Aquí hay dos métodos de implementación, ¡espero que sean útiles para los amigos que lo necesiten!
Aquí hay dos métodos de implementación:
El primero
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="utf-8">
<título></título>
<tipo de estilo="texto/css">
img{
posición: fija;
izquierda: 0px;
arriba: 0px;
}
</estilo>
</cabeza>
<cuerpo>
<img src="icon_2.png" >
<tipo de script="texto/javascript">
var img = document.querySelector('img');
// mousemove evento de movimiento del mouse document.addEventListener('mousemove',function(e){
var pagex = e.pageX-20+'px';
var pagey = e.pageY-20+'px';
// consola.log(pagex,pagey);
img.style.left = pagex;
img.style.top = paginado;
})
</script>
</cuerpo>
</html>
El segundo tipo
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="utf-8">
<título></título>
<tipo de estilo="texto/css">
img{
posición: absoluta;
ancho: 80px;
}
</estilo>
</cabeza>
<cuerpo>
<img src="títere de sombras.jpg" id="img">
<tipo de script="texto/javascript">
ventana.onmousemove = función(e){
var x = e.páginaX;
var y = e.páginaY;
img.style.left = x+'px';
img.style.top = y+'px';
}
</script>
</cuerpo>
</html> 
Recomendaciones relacionadas: [Tutorial en vídeo de JavaScript]
Los anteriores son los detalles de los dos métodos de uso de js para implementar imágenes que siguen el movimiento del mouse. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.
