Este artigo irá apresentar a você como implementar imagens em js para seguir o movimento do mouse. Aqui estão dois métodos de implementação. Espero que sejam úteis para amigos necessitados.
Aqui estão dois métodos de implementação:
O primeiro
<!DOCTYPE html>
<html>
<cabeça>
<meta charset="utf-8">
<título></título>
<style type="texto/css">
imagem{
posição: fixa;
esquerda: 0px;
topo: 0px;
}
</estilo>
</head>
<corpo>
<img src="icon_2.png" >
<script type="texto/javascript">
var img = document.querySelector('img');
// mousemove evento de movimento do mouse document.addEventListener('mousemove',function(e){
var pagex = e.pageX-20+'px';
var pagey = e.pageY-20+'px';
//console.log(pagex,pagey);
img.style.left=pagex;
img.style.top = pagey;
})
</script>
</body>
</html>
O segundo tipo
<!DOCTYPE html>
<html>
<cabeça>
<meta charset="utf-8">
<título></título>
<style type="texto/css">
imagem{
posição: absoluta;
largura: 80px;
}
</estilo>
</head>
<corpo>
<img src="fantoche de sombra.jpg" id="img">
<script type="texto/javascript">
janela.onmousemove=função(e){
var x = e.páginaX;
var y = e.páginaY;
img.style.left = x+'px';
img.style.top = y+'px';
}
</script>
</body>
</html> 
Recomendações relacionadas: [Tutorial de vídeo JavaScript]
Acima estão os detalhes dos dois métodos de uso de js para implementar imagens que seguem o movimento do mouse. Para obter mais informações, preste atenção a outros artigos relacionados no site PHP chinês!
