Эта статья познакомит вас с тем, как реализовать изображения в js, которые будут отслеживать движение мыши. Надеюсь, они будут полезны нуждающимся друзьям.
Вот два метода реализации:
Первый
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="utf-8">
<title></title>
<style type="text/css">
изображение {
положение: фиксированное;
слева: 0 пикселей;
верх: 0 пикселей;
}
</стиль>
</голова>
<тело>
<img src="icon_2.png" >
<тип сценария="текст/javascript">
вар img = document.querySelector('img');
// событие перемещения мыши mousemove document.addEventListener('mousemove',function(e){
вар pagex = e.pageX-20+'px';
var pagey = e.pageY-20+'px';
// console.log(pagex,pagey);
img.style.left = pagex;
img.style.top = страничный;
})
</скрипт>
</тело>
</html>
Второй тип
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="utf-8">
<title></title>
<style type="text/css">
изображение {
позиция: абсолютная;
ширина: 80 пикселей;
}
</стиль>
</голова>
<тело>
<img src="shadow puppet.jpg" id="img">
<тип сценария="текст/javascript">
window.onmousemove = функция (e) {
вар х = e.pageX;
вар у = e.pageY;
img.style.left = x+'px';
img.style.top = y+'px';
}
</скрипт>
</тело>
</html> 
Рекомендации по теме: [Видеоурок по JavaScript]
Выше приведены подробные сведения о двух методах использования js для реализации изображений, которые следуют за движением мыши. Для получения дополнительной информации обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP!
