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事件才行.我这里有两段代码,思路都一 ...

随机推荐

js 冒泡事件与解决冒泡事件
事件冒泡 :当一个元素接收到事件的时候会把他接收到的事件传给自己的父级,一直到window . html代码: <div id="div1"> <div id= ...
解决CentOS查询不到ip
问题:登陆操作系统,输入ip addr 也可以输入ifconfig查看ip,发现ens33目录中没有inet属性解答:查看ens33的网卡配置: vi /etc/sysconfig/network- ...
Android中include标签的使用（打开引用布局，隐藏当前布局）
在开发app的时候,有时候一个布局会反复用到,可以把反复用到的布局单独写一个xml文件,什么时候用到就用includ标签引入xml 下面是我写的反复用到的一个xml,里面有2个button,一个Tex ...
React组件Components的两种表示方式
函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...
oracle数据库修改密码
忘记了数据库的登录密码,oracle数据库无法登录了. 先删除原先的密码保存文件: del E:\oracle_app\Administrator\product\11.2.0\dbhome_1\da ...
codeforces 1101G (Zero XOR Subset)-less 前缀异或+线性基
题目传送门题意:给出一个序列,试将其划分为尽可能多的非空子段,满足每一个元素出现且仅出现在其中一个子段中,且在这些子段中任取若干子段,它们包含的所有数的异或和不能为0．思路:先处理出前缀异或,这样 ...
并排的两个div之间会有空隙
两个并排的DIV会有如下图所示的空隙是因为代码中两个DIV之前有个 ’回车‘ 这么写就OK了可是为什么会有这种问题呢,是因为浏览器将空格.回车.tab键等字符都当做一个空格处理,所以当你回车 ...
HDU - 4291 循环节
还有这种操作? #include<bits/stdc++.h> #define rep(i,j,k) for(register int i=j;i<=k;i++) #define p ...
ssh,hibernate动态映射多表
[From] http://www.07net01.com/2016/01/1172051.html 最近在做OA系统(ssh),一直在想如何把框架架得更完善,此前已经在框架里集成springMVC, ...
PIE SDK矢量分级渲染
1. 功能简介分级渲染是矢量的一种数据表达方式.通过选取一个字段,并根据实际需要对字段的数据进行分级,并对每一级设置不同的符号,已达到区分显示的效果. 2. 功能实现说明 2.1. 实现思路及原理说 ...

JS监测鼠标指针位置

JS监测鼠标指针位置的更多相关文章

随机推荐

热门专题