javascript每日一练(六)——事件一
一、event对象
var oEvent = ev || event;//获取事件对象 oEvent.clientX oEvent.clientY//获取鼠标坐标 oEvent.cancelBubble = true;//阻止冒泡
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; display:none; position:absolute;} </style> <script> window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); //event对象,用来获取事件的详细信息 //获取鼠标位置 document.onmousemove = function(ev){ var oEvent = ev || event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; oDiv.style.top = oEvent.clientY + scrollTop + 'px'; oDiv.style.left = oEvent.clientX + 'px'; }; oBtn.onclick = function(ev){ var oEvent = ev || event; oDiv.style.display = 'block'; oEvent.cancelBubble = true; }; document.onclick = function(){ oDiv.style.display = 'none'; }; }; </script> </head> <body style="height:2000px;"> <input id="btn1" type="button" value="显示" /> <div id="div1"> <a href="http://baidu.com">百度</a> </div> </body> </html>
javascript每日一练(六)——事件一的更多相关文章
- javascript每日一练(七)——事件二:键盘事件
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...
- javascript每日一练(八)——事件三:默认行为
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...
- javascript每日一练(一)——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十三)——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练(十二)——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练(十一)——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- javascript每日一练(十)——运动二:缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
随机推荐
- Html表格<table>还是须要加入一些标签进行优化,能够加入标题<caption>和摘要<table summary>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- python 之 yield表达式
如果在某个函数中包含了yield, 这意味着这个函数已经是一个Generator, 它的执行 会和其他普通的函数有很多不同. 比如: def h(): print 'To be bra ...
- js 常用的一些函数
//设置默认焦点 var setFocus = function SetFocus(elementId) { document.onkeydown = function (even ...
- 使CSS3样式在IE里面有效果
1. 下载ie-css3.htc文件 2. 当前元素一定要有定位属性,像是position:relative或是position:absolute属性. 3. z-index值一定要比周围元素的要高 ...
- 说说Xcode4中xib绑定的原理
最开始的是时候始终没有弄明白xib文件中的绑定关系.经过一周的开发体验终于有一些理解与收获. Xib文件就是MVC模式中的View这个层的界面显示布局的信息.即类似Asp.net的aspx文件或者ja ...
- 两种方式在Tableau Desktop 中创建子弹图(Bullet Chart)
子弹图,顾名思义是由于该类信息图的样子很想子弹射出后带出的轨道.起初,子弹图的发展是为了取代仪表盘上常见的那种里程表,时速表等基于圆形的信息表达方式.子弹图无修饰的线性表达方式使我们能够在狭小的空间中 ...
- C++之类与对象(1)
下个阶段,我将讲解C++中面向对象的部分,也是C++对C语言改进的最重要的部分.以前C++也被叫做是"带类的C".今天主要讲类的构成,成员函数以及对象的定义和使用. 1.其实这一节 ...
- Web Api Route 注册要放在 Mvc Route 注册前
今天想研究一下Web Api,写了一个测试Api,打开网站后浏览一下,可是却提示找不到方法,刚开始以为哪里配置错了,可找了半天也没见. 因为我是在一个现有Mvc站点做的Demo,所以打算新建一个Mvc ...
- java面板设计
写面板真的是写到吐血,深深感受到什么叫又臭又长,可能是自己用的太烂吧. 关于布局管理器不写一下还是不懂,另外加面板的思想跟html中div的感觉差不多. 发现的一个小彩蛋:用JScrollPane的时 ...
- poj 2363 Blocks(暴力)
题目链接:http://poj.org/problem?id=2363 思路分析:由于数据较小,采用暴力搜索法.假设对于矩形边长 1 <= a <= b <= c <= N; ...