js-Methode zum Erlernen einfacher Mausfolgen-Effekt_Javascript-Fähigkeiten-js-Tutorial-php.cn

js-Methode zum Erlernen einfacher Mausfolgen-Effekt_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:04:58

Original

1215 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie man in js einen einfachen Mausfolgeeffekt erzielt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Maus folgen bedeutet, wie der Name schon sagt, dass es bei Bewegung der Maus eine Animation gibt, die der Maus folgt.

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 unter FF ein Parameter an die Ereignisfunktion übergeben wird und dieser Parameter das Ereignisobjekt darstellt.

Punkt 2:

document.onmousemove = function(evt)

Nach dem Login kopieren

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

Punkt 3:

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

Nach dem Login kopieren

Dies dient der Kompatibilität mit Chrome und anderen Browsern. Chrome verwendet die letztere und andere Browser verwenden die vordere.

Punkt 4:

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

Nach dem Login kopieren

Weisen 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 zu 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>
<div id="to_top">鼠标跟随</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.