index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<!-- <img id="cat" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/cat-48.png">-->
</body>
</html>
1.js
// Кошка гоняется за мышью. Первый вариант.
/*var cat = document.getElementById('cat');
document.onmousemove = function(event) {
cat.style.position = 'fixed';
cat.style.left = event.clientX + 20 + 'px'; // координата мыши от левого края
cat.style.top = event.clientY + 20 + 'px'; // координата мыши от правого края
}*/
// Кошка гоняется за мышью. Второй вариант.
// При первом движении мыши добавляем в body изображение.
// document.getElementsByTagName('body')[0] - нулевой элемент массива: body
// Метод insertAdjacentHTML позволяет вставить строку HTML кода в любое место страницы. Код вставляется относительно опорного элемента.
document.onmousemove = function() {
document.getElementsByTagName('body')[0].insertAdjacentHTML('beforeEnd',
'<img id="cat" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/cat-48.png">');
var cat = document.getElementById('cat');
cat.style.position = 'fixed';
document.onmousemove = function(event) {
cat.style.left = event.clientX + 20 + 'px'; // координата мыши от левого края
cat.style.top = event.clientY + 20 + 'px'; // координата мыши от правого края
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<!-- <img id="cat" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/cat-48.png">-->
</body>
</html>
1.js
// Кошка гоняется за мышью. Первый вариант.
/*var cat = document.getElementById('cat');
document.onmousemove = function(event) {
cat.style.position = 'fixed';
cat.style.left = event.clientX + 20 + 'px'; // координата мыши от левого края
cat.style.top = event.clientY + 20 + 'px'; // координата мыши от правого края
}*/
// Кошка гоняется за мышью. Второй вариант.
// При первом движении мыши добавляем в body изображение.
// document.getElementsByTagName('body')[0] - нулевой элемент массива: body
// Метод insertAdjacentHTML позволяет вставить строку HTML кода в любое место страницы. Код вставляется относительно опорного элемента.
document.onmousemove = function() {
document.getElementsByTagName('body')[0].insertAdjacentHTML('beforeEnd',
'<img id="cat" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/cat-48.png">');
var cat = document.getElementById('cat');
cat.style.position = 'fixed';
document.onmousemove = function(event) {
cat.style.left = event.clientX + 20 + 'px'; // координата мыши от левого края
cat.style.top = event.clientY + 20 + 'px'; // координата мыши от правого края
}
}
Комментариев нет:
Отправить комментарий