onmouseover事件

根据教学视频写了个onmouseover事件：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>20170414-Event-2</title>

         <script src="20170414-Event-2.js" type="text/javascript" charset="utf-8"></script>

     </head>

     <body>

     </body>

 </html>

 function create(mouse){

     var num=44;

     var bgcolor='#';

     var body=document.getElementsByTagName('body')[0];

     var div=document.getElementsByTagName('div');

 //    var scr_x=document.documentElement.scrollLeft;

 //    var scr_y=document.documentElement.scrollTop;

     var arr=new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');

     for (var i=0;i<6;i++) {

         var index=Math.floor(Math.random()*arr.length);

         bgcolor+=arr[index];

     }

     for (var j=0;j<num;j++) {

         var rand=Math.random()*40;

         div[j]=document.createElement('div');

         body.appendChild(div[j]);

         div[j].style.position='absolute';//必不可少，否则不随鼠标移动

         div[j].style.width=div[j].style.height=rand+'px';

         div[j].style.borderRadius='50%';

         div[j].style.backgroundColor=bgcolor;

         div[j].style.opacity=Math.random();         div[j].style.left=mouse.clientX+rand*i+'px';

         div[j].style.top=mouse.clientY+Math.random()*40*i+'px';

     }

 }

 document.onmousemove=create;

相关文章