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事件才行.我这里有两段代码,思路都一 ...
随机推荐
- Sql server if-else以及switch
--相当于C#中的if-else 根据levle列的值来判断自定义列显示的内容--要求then后面的数据类型必须一致 select * ,头衔=case when [levle]=1 then '菜鸟 ...
- 为Arch Linux添加鼠标支持(gpm)
gpm的安装 在Arch Linux中安装gpm $ pacman -S gpm 如果你正在使用触控板,需要安装一下插件 $ pacman -S gpm xf86-input-synaptics 需要 ...
- 20165224 陆艺杰 《Java程序设计》课程总结
每周作业链接汇总 https://www.cnblogs.com/lyj-/p/8414278.html https://www.cnblogs.com/lyj-/p/8695018.html htt ...
- springcloud微服务总结六
SpringCloud实战7-Config分布式配置管理 分布式环境下的统一配置框架,已经有不少了,比如百度的disconf,阿里的diamand 官方文档对spring Cloud Config的描 ...
- 洛谷 P2048 BZOJ 2006 [NOI2010]超级钢琴
题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中A ...
- QDU_组队训练（AJFC）
A - Pretty Matrix DreamGrid's birthday is coming. As his best friend, BaoBao is going to prepare a g ...
- python-基础学习篇（一）
python基础学习(一) 不积硅步,无以至千里.基础的学习越加透彻,才能更清楚的理解和分析需求,我贯彻基础学习“永无止境”的理念,故把自学的知识梳理在博客中,基础学习篇无限更新. python介绍 ...
- 计算两个日期相差的天数 js php日期 减一年
计算两个日期相差的天数 //sDate1和sDate2是yyyy-MM-dd格式 function dateDiff(sDate1, sDate2) { var aDate, oDate1, oDat ...
- ubuntu root用图形界面登录
http://blog.csdn.net/weimine/article/details/69055536 http://blog.csdn.net/gongxifacai_believe/artic ...
- python基础学习-思维导图总结