根据教学视频写了个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. ORM-Dapper学习<二>

    Dapper的简介 Dapper是.NET下一个micro的ORM,它和Entity Framework或Nhibnate不同,属于轻量级的,并且是半自动的.Dapper只有一个代码文件,完全开源,你 ...

  2. yii2 Nav::widget() 和 Menu::widget()

    Nav::widget http://www.yiiframework.com/doc-2.0/yii-bootstrap-nav.html Menu::widget()  http://www.yi ...

  3. ngrok localhost和http 的转换

    得益于老大的教导,今天又接触到一个有意思的东西,希望分享出来,供大家玩耍----“ngrok”: 乍一看还以为是angualar的新玩意,其实不是.这这家伙可以使本地开发的web应用,不用打包上传,也 ...

  4. oracle图形界面乱码

    oracle界面乱码解决方案 在Linux的中文操作系统下使用xmanager进行Oracle进行安装的时候,可能出现乱码界面,可以通过以下方法进行解决 1 修改环境属性  vi /etc/sysco ...

  5. 配置远程服务器，使hyper-v能够连接网络

    一般远程服务器只有一个网卡和IP,如果你要在服务器上装虚拟机,那么要使虚拟机能够连接网络,必须要创建虚拟交换机. 如果创建虚拟交换机并桥接,那么就会改变IP地址,改变IP地址,就连接不上远程服务器.造 ...

  6. TCP协议之三次握手与四次挥手

    TCP协议是TCP/IP体系中核心一个协议,该协议比起IP协议,ICMP协议,UDP协议都更复杂,因此这篇文章主要分析TCP协议在建立连接和断开连接的时候,状态转移以及报文段的内容. 下面,先放一张T ...

  7. Android开发之AsyncTask示例Demo

    今天做了一个AsyncTask的小Demo,内含注释,通过此Demo,可以对AsyncTask有一个详细的了解 已经将项目上传到了GitHub上(程序有一个小bug,在第一次提交有说明,有解决方法请留 ...

  8. css3 loading

    http://jsbin.com/vonuni/2/edit?html,css,output

  9. MYSQL数据库-其他

    FROM:实验楼 索引: 当表中有大量记录时,若要对表进行查询,没有索引的情况是全表搜索.而如果在表中已建立索引,在索引中找到符合查询条件的索引值,通过索引值就可以快速找到表中的数据. 建立索引: $ ...

  10. Unity 3D Framework Designing(4)——设计可复用的SubView和SubViewModel(Part 1)

    『可复用』这个词相信大家都熟悉,通过『可复用』的组件,可以大大提高软件开发效率. 值得注意的事,当我们设计一个可复用的面向对象组件时,需要保证其独立性,也就是我们熟知的『高内聚,低耦合』原则. 组件化 ...