Maison > Article > interface Web > JS implémente les effets spéciaux suivants la souris

JS implémente les effets spéciaux suivants la souris

php中世界最好的语言original: 2018-04-13 15:26:123530parcourir

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!

php spring electron webpack JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résoudre le problème du chemin d'aperçu du téléchargement d'image angulaireArticle suivant：Résoudre le problème du chemin d'aperçu du téléchargement d'image angulaire

Articles Liés

Voir plus