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事件才行.我这里有两段代码,思路都一 ...
随机推荐
- SJTU 机试 数学
题目描述 给定n,a求最大的k,使n!可以被a^k整除但不能被a^(k+1)整除. 输入描述: 两个整数n(2<=n<=1000),a(2<=a<=1000) 输出描述: 一个 ...
- asp.net MVC中的@model与Model
asp.net MVC中的@model与Model https://blog.csdn.net/ydm19891101/article/details/44301201 在MVC的实际使用中,我们经常 ...
- requirejs重点
1.shim:用于配置不是通过define函数包装的文件,导出什么东西,如果这个文件不再baseURL目录下的话,需要在paths中配置文件目录.并且paths中的键名.shim中的键名.requir ...
- sublime text3文本字体大小设置
1.perferences->settings-user 4·将以下代码粘贴进入即可 { "font_face": "source code pro, " ...
- Hibernate学习笔记（三）—— Hibernate的事务控制
Hibernate是对JDBC的轻量级封装,其主要功能是操作数据库.在操作数据库过程中,经常会遇到事务处理的问题,接下来就来介绍Hibernate中的事务管理. 在学习Hibernate中的事务处理之 ...
- 微信获取用户信息的两个接口和两个ACCESS_TOKEN
有一段时间没有搞微信开发了 ,今天突然要改一下程序! 回头一看 微信的帮助文档太tm的稀烂的,太难懂了,这做个笔记以后看着方便 微信有2个ACCESS_TOKEN, 1,基础接口的token 获取接口 ...
- 地牢逃脱----DFS搜索最优解
https://www.nowcoder.com/practice/0385945b7d834a99bc0010e67f892e38?tpId=85&tqId=29831&tPage= ...
- centos7安装SourceCodePro字体
1. 下载SourceCodePro字体,后缀应为.ttf. 2. 将字体文件复制到fonts(/usr/share/fonts)文件夹下: [root@centos fonts]# mv /home ...
- nginx-图片资源代理
location ~ .*\.(gif|jpg|jpeg|png|bmp|mp3)$ { root E:/xx/Uploads/; } 记得放在根目录下面
- [转]一种可以避免数据迁移的分库分表scale-out扩容方式
原文地址:http://jm-blog.aliapp.com/?p=590 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星期1的数据在一个库/表,或所有?月 ...