Vollständiges Beispiel für einen einfachen DiV-Ebeneneffekt mit der Maus, der durch JS_Javascript-Kenntnisse implementiert wurde-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Vollständiges Beispiel für einen einfachen DiV-Ebeneneffekt mit der Maus, der durch JS_Javascript-Kenntnisse implementiert wurde

May 16, 2016 pm 03:34 PM

js 鼠标跟随

Das Beispiel in diesem Artikel beschreibt den einfachen Maus-Folge-DiV-Ebeneneffekt, der in JS implementiert ist. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dieser Code stellt eine Reihe von Div-Effekten dar, die der Maus folgen, und hat einen Drag-Effekt. Wenn die Maus schnell zittert, wird der Div-Ebeneneffekt weiter verstärkt und die folgenden Divs verschwinden automatisch Einige Fehler. Ich freue mich auf die Zusammenarbeit mit Ihnen. Bitte verbessern Sie diesen JS-Effekt.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-simple-mouse-over-div-codes/

Der spezifische Code lautet wie folgt:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;style&gt;
div {width:10px; height:10px; background:red; position:absolute;}
&lt;/style&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;跟随鼠标的Div效果&lt;/title&gt;
&lt;script&gt;
window.onload=function ()
{
 var aDiv=document.getElementsByTagName('div');
 var i=0;
 setInterval(function(){
  for(i=aDiv.length-1;i&gt;0;i--)
  {
   aDiv[i].style.left=aDiv[i-1].style.left;
   aDiv[i].style.top=aDiv[i-1].style.top;
  }
  },5);
 document.onmousemove=function (ev)
 {
  var oEvent=ev||event;
  aDiv[0].style.left=oEvent.clientX+'px';
  aDiv[0].style.top=oEvent.clientY+'px';
 };
};
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Erklärung dieser Website

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