JavaScript基础—鼠标移入移出
来源:互联网 发布:大白菜安装linux iso 编辑:程序博客网 时间:2024/06/05 23:02
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 300px; border: 1px solid #000000; float: left; margin: 10px 20px; } div p{ background-color: gray; color: #FFFFFF; text-align: center; height: 50px; line-height: 50px; } </style> <script> var a = 0;//声明 var b = 0; var c = 0; var d = 0; var e = 0; //鼠标移动事件 function myMove(){ a++; // a = a + 1; var font = document.getElementById("a");//获取font标签对象 font.innerHTML = a; } //鼠标移入事件over function myOver(){ b++; var font = document.getElementById("b");//获取font标签对象 font.innerHTML = b; } //鼠标移出事件out function myOut(){ c++; var font = document.getElementById("c");//获取font标签对象 font.innerHTML = c; } //鼠标移入事件enter function myEnter(){ d++; var font = document.getElementById("d");//获取font标签对象 font.innerHTML = d; } //鼠标移出事件leave function myLeave(){ e++; var font = document.getElementById("e");//获取font标签对象 font.innerHTML = e; } </script> </head> <body> <div onmousemove="myMove()"> <font id="a">0</font> <p>鼠标移动事件onmousemove</p> </div> <!--事件冒泡--> <div onmouseover="myOver()"> <font id="b" style="border: 1px solid #000000;">0</font> <p>鼠标移入事件onmouseover</p> </div> <div onmouseout="myOut()"> <font id="c">0</font> <p>鼠标移出事件onmouseout</p> </div> <div onmouseenter="myEnter()"> <font id="d">0</font> <p>鼠标移入事件onmouseenter</p> </div> <div onmouseleave="myLeave()"> <font id="e">0</font> <p>鼠标移出事件onmouseleave</p> </div> </body></html>
阅读全文
0 0
- JavaScript基础—鼠标移入移出
- JavaScript进阶--拉勾网鼠标移入移出效果
- 鼠标移入移出事件
- 鼠标移入移出事件
- javascript实现鼠标移入与移出变换图片
- JavaScript鼠标移入移出时颜色变化代码
- JavaScript 定时器 鼠标移入移出div颜色渐变效果
- web前端零基础练习特效,鼠标移入移出效果
- MFC鼠标移入移出事件
- 鼠标移入移出的代码
- 鼠标移入显示移出消失
- 鼠标移入移出改变样式
- JS鼠标移入,移出事件
- 鼠标的移入移出事件
- jquery 使用鼠标移入移出
- 鼠标的移出和移入
- 【HTML】—鼠标移入或移出表格,表格变色
- JavaScript表格隔行变色,鼠标移入表格展示背景颜色,鼠标移出颜色还原
- web-前端之员工界面修改的form表单,其中包含各种表单的简单表达
- vb.net开发插件使用Log4Net记录日志
- 关于快速排序的代码实现
- 2017.9.26 noip模拟赛 总结
- java系统高并发的解决方案
- JavaScript基础—鼠标移入移出
- npm install 安装过程卡住不动
- 返回数组最左边位置
- Oracle CASE WHEN 用法介绍(转)
- ORACLE 常用函数——日期/时间函数
- Android内存泄露解析和优化
- 新手学web之CSS快速了解及入门
- spring security四种实现方式
- **一个模仿百度的案例**