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事件才行.我这里有两段代码,思路都一 ...
随机推荐
- 锐速破解版linux一键自动安装包
锐速破解版linux一键自动安装包(5月28日更新) 锐速破解版安装方法: wget -N --no-check-certificate https://github.com/91yun/server ...
- Jmeter函数作用域实时取值覆盖[针对HTTP Request等控制器]
jmeter的属性和变量可以简单理解为编程里面的全局变量和局部变量.属性是全局可见,可以跨线程组传递调用,而变量基本上只能存在于一个线程组中(在测试计划定义的变量也是可以跨线程组传递的).同线程组内的 ...
- abp框架angular 项目docker 手动部署到Linux环境中
1.https://aspnetboilerplate.com/Templates 2.后端项目发布,在publish中abp默认已经存在DockerFile文件 3.修改后端文件中的DockerFi ...
- Tensorflow基础-mnist数据集
MNIST数据集,每张图片包含28*28个像素,把一个数组展开成向量,长度为28*28=784,故数据集中mnist.train.images是一个形状为[60000,784]的张量,第一个维度数字用 ...
- Autofac构建
1.初始化 using System.Reflection; using System.Web; using System.Web.Mvc; using System.Configuration; u ...
- Phyton Flask框架学习记录。
注意:在左侧菜单栏(在JQuery插件库下载的)右边是采用<iframe> 标签嵌入其他页面,此时标签的src应用用后台中的方法名称(本人测试用的是无参数的方法), 而页面跳转window ...
- mutillidae之注册页面的Insert型报错注入
http://127.0.0.1/mutillidae/index.php?page=register.php 1.注册一个用户试一试,发现页面只提示用户注册成功信息,并五其它可回显信息,果断尝试盲注 ...
- 二分函数 lower_bound()
这篇博客说是STL源码.... https://www.cnblogs.com/cobbliu/archive/2012/05/21/2512249.html 头文件 algorithm 1.lowe ...
- 2019.3.26 SQL语句（进阶3）
表的联查 员工表与部门表 员工表:id,姓名,年龄,部门id 部门表:部门id,部门名,部门成立时间,部门领导,部门职责.... 表和表之间的关系 一对一 一对多 多对多 创建联查 创建表 先创建被依 ...
- How to install local .deb packages
如何安装本地的.deb包 usually I do dpkg -i <deb file>, it'll fail saying it needs dependencies. After t ...