根据教学视频写了个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;

onmouseover事件的更多相关文章

  1. 深度理解onmouseover事件和onmouseout事件

    今天简单的讲解下onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的 ...

  2. JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  3. onload onmouseover 事件监听

    <div class="nav"> <ul> <li>翠翠</li> <li>嗯嗯</li> <li& ...

  4. 父元素onmouseover触发事件在父子元素间移动不停触发的问题

    今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. 事件冒泡以及onmouseenter 和 onmouseover 的不同

    1. onmouseenter onmouseenter 事件在鼠标指针移动到元素上时触发. 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发. onmouseent ...

  6. JS事件－让网页交互

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  7. CSS鼠标响应事件经过、移动、点击示例介绍

    本文为大家介绍下CSS 鼠标响应事件:鼠标经过CSS.鼠标移动CSS.鼠标点击CSS以及示例,喜欢的朋友可以参考下   几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onM ...

  8. onmouseover和onmouseout的那些事

    这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onm ...

  9. js之事件

    1.事件类型 鼠标事件 onclick事件 鼠标点击某个对象 ondblclick事件 鼠标双击某个对象 onmousedown事件 鼠标按下 onmouseup事件 鼠标松开 onmouseover ...

随机推荐

  1. CCF2014093字符串匹配(C语言版）

    问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一个字母的大写和小写看作不同的字符:当选项关闭时,表示同一个字母的大写和小写 ...

  2. Android 启动模式--任务(Task)--桟 的误区

    Android 启动模式--任务(Task)--桟 的误区 写这篇文章是因为前几天的一次面试,面试官说SingleInstance模式会新建一个桟,而SingleTask不会.首先不说这个对不对(非要 ...

  3. 深入浅出数据结构C语言版（5）——链表的操作

    上一次我们从什么是表一直讲到了链表该怎么实现的想法上:http://www.cnblogs.com/mm93/p/6574912.html 而这一次我们就要实现所说的承诺,即实现链表应有的操作(至于游 ...

  4. java学习笔记 --- 多态

    一.多态 (1)定义:同一个对象在不同时刻体现出来的不同状态.父类的引用或者接口的引用指向了自己的子类对象.   Dog d = new Dog();//Dog对象的类型是Dog类型.  Animal ...

  5. windows32位安装MYSQL-python1.2.3

    建议不要用pip安装MYSQL-python,因为会自动选择MYSQL-python1.2.5这个版本,但是这个版本不支持windows 32位系统. 1.首先安装VS2008,因为要依赖VC9.0编 ...

  6. nicescroll 配置参数

    jQuery滚动条插件兼容ie6+.手机.ipad http://www.areaaperta.com/nicescroll/ 配置参数 当调用“niceScroll”你可以传递一些参数来定制视觉方面 ...

  7. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  8. laravel 框架memcache的配置

    Laravel5框架在Cache和Session中不支持Memcache,看清了是Memcache而不是Memcached哦,MemCached是支持的但是这个扩展真的是装的蛋疼,只有修改部分源码让其 ...

  9. sql server 去除字符中空格的方法

    用的是REPLACE ( original-string, search-string, replace-string )方法,这三个参数分别是:原字符串.要替换的字符串.替换成的字符串 比如:UPD ...

  10. Codeforces 765E. Tree Folding [dfs][树形dp]

    题解:先从节点1开始dfs.对于每一个节点,用一个set记录:以该点为根的子树的深度. a) 如果此节点的某个子节点打出了GG,则此节点直接打出GG. b) 若set的元素个数<=1,那么,以该 ...