Implementierung eines JavaScript-Mausfolgeeffekts-js-Tutorial-php.cn

Implementierung eines JavaScript-Mausfolgeeffekts

黄舟

Freigeben： 2017-11-18 13:22:14

Original

2205 Leute haben es durchsucht

In unserer täglichen Entwicklungsarbeit verwenden wir häufig JavaScript, um den Mausfolgeeffekt zu erzielen. Viele Freunde wissen möglicherweise nicht viel über Mausfolgeeffekt. Die Methode umfasst JavaScript-Mausereignisse, Koordinatenerfassung und andere verwandte Techniken!

Punkt 1:

var oEvent = evt || window.event;

Nach dem Login kopieren

Dies ist so geschrieben, dass es mit IE und FF kompatibel ist. Unter IE stellt window.event das Ereignisobjekt dar, während es unter FF einen Parameter an den übergibt Ereignisfunktion, dieser Parameter stellt das Ereignisobjekt dar.

Punkt 2:

document.onmousemove = function(evt)

Nach dem Login kopieren

Mausfolgen ist das, was passiert, wenn sich die Maus bewegt.

Punkt drei:

document.documentElement.scrollTop || document.body.scrollTop;

Nach dem Login kopieren

Dies dient der Kompatibilität mit Chrome und anderen Browsern. Der Abstand zwischen der Bildlaufleiste und der oberen Bildlaufleiste wird von Chrome verwendet vorne.

Punkt 4:

oTop.style.top=oEvent.clientY+scrolltop+10+"px";

Nach dem Login kopieren

Ordnen Sie die aktuelle Position der Maus dem Positionswert des Elements zu, wenn sich die Maus bewegt.

oEvent.clientY ist die aktuelle Y-Koordinatenposition der Maus. Der durch scrolltop hinzugefügte Abstand wird so geschrieben, dass beim Scrollen zu einem anderen als dem ersten Bildschirm der Mausfolgeeffekt unverändert bleibt.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{
width:30px;
height:40px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
</style>
<script>
window.onload = function(){
 var oTop = document.getElementById("to_top");
 document.onmousemove = function(evt){
  var oEvent = evt || window.event;
  var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
  oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
 }
}
</script>
</head>
<body style="height:1000px;">
<a href="#">文字</a>
<p id="to_top">鼠标跟随</p>
</body>
</html>

Nach dem Login kopieren

Zusammenfassung:

Nach dem Studium dieses Artikels glaube ich, dass mein Freunde werden ein besseres Verständnis von JavaScript haben. Da ich nun besser verstehe, wie man Mausfolgen implementiert, hoffe ich, dass es für Ihre Arbeit hilfreich sein wird!

Verwandte Empfehlungen:

Maus folgt Textänderungseffekt

Ein einfacher Mausfolge-Eingabeaufforderungseffekt basierend auf JQuery

JS implementierte Mausfolgecode (Cartoon-Handklickeffekt)

Das obige ist der detaillierte Inhalt vonImplementierung eines JavaScript-Mausfolgeeffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!