onmouseover事件

时间：2021-08-31 22:31:03

根据教学视频写了个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. java 实现视频转换通用工具类：视频截图-Ffmpeg（四）

    java 实现视频转换通用工具类:获取视频元数据信息(一) java 实现视频转换通用工具类:视频相互转换-总方法及Mencoder(二) java 实现视频转换通用工具类:视频相互转换-Ffmpeg ...

  2. 如何在已安装Python条件下，安装Anaconda&comma;，并将原有Python添加到Anaconda中

    在安装Anaconda之前,有的已经安装过一个Python版本了,但是又不想删除这个Python版本,该怎么办呢? 概括:轻松两步--在系统环境变量中找到对应之前安装Python的路径并删除:直接将你 ...

  3. IPv4 forwarding is disabled&period; Networking will not work&lowbar;问题解决

    构建Docker镜像时遇见的问题,特做以下记录: 1.编辑 vi /etc/sysctl.conf 2.添加 net.ipv4.ip_forward=1 3.重启network服务 systemctl ...

  4. 机器学习基石12-Nonlinear Transformation

    注: 文章中所有的图片均来自*大学林轩田<机器学习基石>课程. 笔记原作者:红色石头 微信公众号:AI有道 上一节课介绍了分类问题的三种线性模型,可以用来解决binary classif ...

  5. 2018上IEC计算机高级语言&lpar;C&rpar;作业 第1次作业

    1.经过这几周的学习,总结一下学习的心得与体会.(不少于100字:10分) 学习c语言已经一个学期了,刚开始学习的时候老是感觉力不从心.虽然认真听课了, 但是并不能理解它.这种情况到了后来才有所改变. ...

  6. Invalid file name&colon; must contain only &lbrack;a-z0-9&lowbar;&period;&rsqb;【Android报错】

    Invalid file name: must contain only [a-z0-9_.][Android报错] 如: `[2012-02-07 09:58:14 - EmergencyRespo ...

  7. Spark内部流程图

    转载自:https://blog.csdn.net/refuil/article/details/52055104

  8. 如何用移动硬盘安装win7 系统

    身边没有U盘和光盘,就只有一个移动硬盘.移动硬盘安装系统是怎么进行的.在这里小毛孩来给大家上一课. 前期准备: 1.移动硬盘. 2.win7 32位的操作系统(*.iso). 3.有系统且可开机的电脑 ...

  9. break&comma;continue&comma;return和exit的区别

    1.break break语句的使用场合主要是switch语句和循环结构. 在循环结构中使用break语句,就退出循环,接着执行循环结构下面的第一条语句. 如果在多重嵌套循环中使用break语句,当执 ...

  10. 调用Android系统设置项

    Intent mIntent = new Intent(); ComponentName comp = new ComponentName("com.android.settings&quo ...

相关文章