Cette fois, je vais vous présenter l'implémentation JS de l'effet spécial de suivi de la souris Quelles sont les précautions pour implémenter l'effet spécial de suivi de la souris dans JS. un cas pratique. Jetons un coup d'oeil.
Ce qui suit est tout le code après test par l'éditeur :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标跟随十字JS特效代码</title>
</head>
<body style="margin: 0;">
<p id="html"></p>
<script type="text/javascript">
//
var ox = document.createElement('p');
var oy = document.createElement('p');
ox.style.width = '100%';
ox.style.height = '1px';
ox.style.backgroundColor = '#ddd';
ox.style.position = 'fixed';
ox.style.left = 0;
document.body.appendChild(ox);
oy.style.height = '100%';
oy.style.width = '1px';
oy.style.backgroundColor = '#ddd';
oy.style.position = 'fixed';
oy.style.top = 0;
document.body.appendChild(oy);
document.onmousemove = function(e){
var e = e || event;
var x = e.pageX;
var y = e.pageY;
ox.style.top = y + 'px';
oy.style.left = x + 'px';
document.getElementById('html'). innerHTML = 'x : ' + x + '<br/>y : ' + y;
};
</script>
</body>
</html>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web PHP chinois !
Lecture recommandée :
Comment Webpack crée des applications Electron
Explication détaillée du cycle de vie de Spring et de l'utilisation de l'extension de conteneur
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
