Cet article partagera avec vous le code permettant de réaliser l'effet de souris suivant les coordonnées croisées via JS. Les amis dans le besoin peuvent s'y référer.
Cette fois, l'éditeur vous proposera un effet JS, qui peut réaliser l'effet de coordonnées croisées apparaissant en fonction de la taille de la fenêtre du navigateur et suivant le mouvement de la souris. Il peut également calculer les valeurs de coordonnées en temps réel.
Regardons d'abord le rendu après opération :
Voici 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>
<p>更多代码请访问：<a href="//www.jb51.net/" target="_blank">脚本之家</a></p>
</body>
</html>Lors des tests, vous pouvez ajuster le code en JS selon vos besoins X représente l'abscisse et Y représente l'ordonnée.
Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.
Articles connexes :
Comment charger des pages Web externes ou des données de serveur à l'aide du framework MUI
Explication détaillée de Karma+Mocha dans Tests unitaires Vue
Comment utiliser la barre de progression Nprogress.js dans vue
Comment implémenter le rendu serveur Nuxt dans Vue
Interprétation détaillée du cycle de vie des pages dans le mini programme WeChat (tutoriel détaillé)
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)
