suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert Maus-Folge-Spezialeffekte

JS implementiert Maus-Folge-Spezialeffekte

php中世界最好的语言
php中世界最好的语言Original
2018-04-13 15:26:123569Durchsuche

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>

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!

php spring electron webpack JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lösung des Problems des Angular-Bild-Upload-VorschaupfadsNächster Artikel：Lösung des Problems des Angular-Bild-Upload-Vorschaupfads

In Verbindung stehende Artikel

Mehr sehen