Contoh lengkap tetikus mudah berikutan kesan lapisan DiV yang dilaksanakan oleh kemahiran JS

Contoh lengkap tetikus mudah berikutan kesan lapisan DiV yang dilaksanakan oleh kemahiran JS_javascript

WBOY

Lepaskan： 2016-05-16 15:34:22

asal

1056 orang telah melayarinya

Contoh dalam artikel ini menerangkan tetikus mudah berikutan kesan lapisan DiV yang dilaksanakan dalam JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kod ini memaparkan rentetan kesan Div yang mengikuti tetikus, dan mempunyai kesan seretan Apabila tetikus bergoncang dengan pantas, kesan lapisan Div akan terus meningkat, dan Div berikut akan hilang secara automatik beberapa pepijat. Saya berharap dapat bekerjasama dengan anda. Sila perbaiki kesan JS ini.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跟随鼠标的Div效果</title>
<script>
window.onload=function ()
{
 var aDiv=document.getElementsByTagName('div');
 var i=0;
 setInterval(function(){
  for(i=aDiv.length-1;i>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';
 };
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.