cari

Rumah  >  Artikel  >  hujung hadapan web  >  Contoh lengkap tetikus mudah berikutan kesan lapisan DiV yang dilaksanakan oleh kemahiran JS_javascript

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

WBOY
WBOYasal
2016-05-16 15:34:221040semak imbas

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS melaksanakan simulasi carian Baidu "2012 akhir dunia" halaman web kesan koyakan gempa bumi kemahiran code_javascriptArtikel seterusnya：JS melaksanakan simulasi carian Baidu "2012 akhir dunia" halaman web kesan koyakan gempa bumi kemahiran code_javascript

Artikel berkaitan

Lihat lagi