Complete example of simple mouse following DiV layer effect implemented by JS

Complete example of simple mouse following DiV layer effect implemented by JS_javascript skills

WBOY

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

Original

1035 people have browsed it

The example in this article describes the simple mouse following DiV layer effect implemented in JS. Share it with everyone for your reference, the details are as follows:

This code presents a string of Div effects that follow the mouse, and has a drag effect. As the mouse shakes rapidly, the Div layer effect will continue to increase, and the following Divs will automatically disappear. However, there are still some bugs. I look forward to working with you. Please improve this JS effect.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<!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>

Copy after login

I hope this article will be helpful to everyone in JavaScript programming.