JS implementiert Maus-Folge-Spezialeffekte-js-Tutorial-php.cn

JS implementiert Maus-Folge-Spezialeffekte

php中世界最好的语言

Freigeben： 2018-04-13 15:26:12

Original

3564 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die JS-Implementierung des Maus-Folge-Spezialeffekts vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung des Maus-Folge-Spezialeffekts in JS? Ein praktischer Fall.

Das Folgende ist der gesamte Code nach dem Testen durch den Herausgeber:

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie Webpack Electron-Anwendungen erstellt

Detaillierte Erläuterung des Spring-Lebenszyklus und der Verwendung von Containererweiterungen

Das obige ist der detaillierte Inhalt vonJS implementiert Maus-Folge-Spezialeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!