JS监测鼠标指针位置
需求1：鼠标移入正方形的时候，蓝色小圆点跟随鼠标滚动(不许蓝色小圆点超出正方形区域)，
正方形里实时显示当前鼠标相对于body的坐标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="app/src/js/demo.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 200px;
height: 200px;
border:1px solid #333;
position: relative;
}
#dot {
position: absolute;
left:0;
right:0;
width: 10px;
height: 10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: deepskyblue;
display: inline-block;
}
</style>
</head>
<body> <div id="box">
<span id="point">
(0, 0)
</span>
<span id="dot"></span>
</div> </body>
</html>
// 当需求为获得的坐标值相对于body时
function positionBody(event) {
var x, y;
var e = event || window.event;
x = e.clientX;
y = e.clientY;
return {
x: x,
y: y
}
}
function executeMove(event, box, point, dot) {
var x = positionBody(event).x;
var y = positionBody(event).y;
// 获取盒子不计算边框的宽高
var boxWidth = box.clientWidth;
var boxHeight = box.clientHeight;
var dotWidth = dot.offsetWidth;
var dotHeight = dot.offsetHeight;
// 边界距离
var borderLeft = boxWidth - dotWidth;
var borderTop = boxHeight - dotHeight;
if(x >= borderLeft) {
dot.style.left = borderLeft + 'px';
} else if (y >= borderTop) {
dot.style.top = borderTop + 'px';
} else {
dot.style.left = x + 'px';
dot.style.top = y + 'px';
}
point.innerHTML = '(' + x + ', ' + y + ')';
}
window.onload = function () {
var box = document.getElementById('box');
var point = document.getElementById('point');
var dot = document.getElementById('dot');
if(box.attachEvent) {
box.attachEvent('mousemove', function (event) {
executeMove(event, box, point, dot);
});
} else {
box.addEventListener('mousemove', function (event) {
executeMove(event, box, point, dot);
}, false);
}
};
js bin 地址：http://jsbin.com/suvizojube/edit?html,js,output
需求2：鼠标移入正方形的时候，蓝色小圆点跟随鼠标滚动(不许蓝色小圆点超出正方形区域)，
正方形里实时显示当前鼠标相对于正方形的坐标（要求正方形在页面里垂直居中）。
元素垂直居中的三种实现方式：
http://www.cnblogs.com/lqcdsns/p/6378536.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="app/src/js/demo.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
#box {
width: 200px;
height: 200px;
border:1px solid #333;
/*脱离文档流*/
position: relative;
left: 0;
right:0;
/*偏移*/
top: 50%;
bottom:0;
/*margin: -100px auto 0 auto;*/
/*-50%代表上移盒子高度的一半*/
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
#dot {
position: absolute;
left:0;
right:0;
width: 10px;
height: 10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: deepskyblue;
display: inline-block;
}
</style>
</head>
<body> <div id="box">
<span id="point">
(0, 0)
</span>
<span id="dot"></span>
</div> </body>
</html>
// 当需求为获得的坐标值相对于box时
function positionBox(event, box) {
var x, y;
var e = event || window.event;
var boxWidth = box.clientWidth;
var boxHeight = box.clientHeight;
x = e.clientX - box.offsetLeft;
y = e.clientY - (box.offsetTop - box.offsetHeight/2);
return {
x: x,
y: y
}
}
function executeMove(event, box, point, dot) {
var x = positionBox(event, box).x;
var y = positionBox(event, box).y;
// 获取盒子不计算边框的宽高
var boxWidth = box.clientWidth;
var boxHeight = box.clientHeight;
var dotWidth = dot.offsetWidth;
var dotHeight = dot.offsetHeight;
// 边界距离
var borderLeft = boxWidth - dotWidth;
var borderTop = boxHeight - dotHeight;
if(x >= borderLeft) {
dot.style.left = borderLeft + 'px';
} else if (y >= borderTop) {
dot.style.top = borderTop + 'px';
} else {
dot.style.left = x + 'px';
dot.style.top = y + 'px';
}
point.innerHTML = '(' + x + ', ' + y + ')';
}
window.onload = function () {
var box = document.getElementById('box');
var point = document.getElementById('point');
var dot = document.getElementById('dot');
if(box.attachEvent) {
box.attachEvent('mousemove', function (event) {
executeMove(event, box, point, dot);
});
} else {
box.addEventListener('mousemove', function (event) {
executeMove(event, box, point, dot);
}, false);
}
};
js bin: http://jsbin.com/suvizojube/edit?html,js,output
JS监测鼠标指针位置的更多相关文章
- js获得鼠标的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取鼠标的位置
<!doctype html><html><head><meta charset="utf-8"><title>获取鼠标 ...
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...
- js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
- 前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮
一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault() 支持Chrome等高 ...
- js获取鼠标当前的位置
有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位 ...
- 转：JS在文本域鼠标指定位置插入文本-柯乐义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- JS获取鼠标位置，兼容IE FF
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
随机推荐
- BZOJ3156 防御准备 斜率优化dp
Description Input 第一行为一个整数N表示战线的总长度. 第二行N个整数,第i个整数表示在位置i放置守卫塔的花费Ai. Output 共一个整数,表示最小的战线花费值. Sampl ...
- js 删除removeChild与替换replaceChild
<input type="button" value="删除" id="btn" /> <input type=" ...
- SLAM技术在国内的发展现状
近年来,由于扫地机的出现使得SLAM技术名声大噪,如今,已在机器人.无人机.AVG等领域相继出现它的身影,今天就来跟大家聊一聊国内SLAM的发展现状. SLAM的多领域应用 SLAM应用领域广泛,按其 ...
- 洛谷 P1111 修复公路（最小生成树）
嗯... 题目链接:https://www.luogu.org/problemnew/show/P1111 这道题的关键是读懂题: 首先根据题中的一些扎眼的字眼我们可以判断这是一道用最小生成树来做的题 ...
- Qt 学习之路 2（70）：进程间通信
Qt 学习之路 2(70):进程间通信 豆子 2013年11月12日 Qt 学习之路 2 16条评论 上一章我们了解了有关进程的基本知识.我们将进程理解为相互独立的正在运行的程序.由于二者是相互独立的 ...
- 选择排序 Selection Sort
选择排序 Selection Sort 1)在数组中找最小的数与第一个位置上的数交换: 2)找第二小的数与第二个位置上的数交换: 3)以此类推 template<typename T> / ...
- UVA - 10298 后缀数组(仅观赏)
题意:求最小循环节 \(KMP\)可以20ms通过,而\(da\)实现的后缀数组并无法在3000ms内通过 听说要用\(dc3\)才勉强卡过,这里仅列出\(da\)实现 #include<ios ...
- UVALive - 5963 ad-hoc
注意到合法条件是对称的,那很有可能与2有关, 小于2表示没有这一页,大于2表示冲突了 我也不知道这样做对不对的(输入范围很迷),试一下就A了... #include<bits/stdc++.h& ...
- MyBatis 源码解析SqlSession.getConnection（Connection异常：关闭或者不在Mybatis事务）
从SqlSession的实现类SqlSessionTemplate源码中,看出相关方法被其内部类SqlSessionInterceptor(实现了InvocationHandler)代理 当调用Sql ...
- datagrip 导出数据库备份到本地
1.建立自己的数据库 2.如图 3,结果