需求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监测鼠标指针位置的更多相关文章

  1. js获得鼠标的位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js获取鼠标的位置

    <!doctype html><html><head><meta charset="utf-8"><title>获取鼠标 ...

  3. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  4. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

  5. 前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮

    一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault()  支持Chrome等高 ...

  6. js获取鼠标当前的位置

    有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位 ...

  7. 转：JS在文本域鼠标指定位置插入文本-柯乐义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  9. JS获取鼠标位置，兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

随机推荐

  1. 百度分享，简单的一步操作解决你的网站不支持https访问的问题！

    百度分享,应该是目前最好用的前端分享插件了.然而,官方却没有支持https.现在越来越多的网站都走入https的安全加密队列了,那么在找不到更好地替代品的情况下,怎么能让它支持https呢? 答案当然 ...

  2. ThinkCMF Foreach标签

    foreach标签类似与volist标签,只是更加简单,没有太多额外的属性,例如: <foreach name="list" item="vo"> ...

  3. ubuntu16.04 chromium浏览器无法启动

    点击浏览器不能启动,在终端输入: chromium -browser %U 错误如下: [/)] NSS_VersionCheck("3.26") failed. NSS > ...

  4. jenkins官方文档（中文版）

    https://www.w3cschool.cn/jenkins/

  5. 【转】idea中maven模块编程灰色

    可能是设置中模块的pom.xml文件被忽略了 去掉对勾 转自:https://blog.csdn.net/ethan__xu/article/details/80794060

  6. chrome 相关设置.

    1. 使用chrome 添加道桌面的快捷方式,自动打开两个 tab 解决方法: chrome://apps/ 右击 你的应用图标..勾选在新窗口打开.

  7. C++_IO与文件2-用cout进行输出

    C++将输出流看作是字节流,在程序中,很多数据被组织成比字节更大的单位. 例如int类型由16位或者32位的二进制值表示:double值由64位的二进制数据表示: 但是在将字节流发送给屏幕时,希望每个 ...

  8. P3704 [SDOI2017]数字表格 （莫比乌斯反演）

    [题目链接] https://www.luogu.org/problemnew/show/P3704 [题解] https://www.luogu.org/blog/cjyyb/solution-p3 ...

  9. P3345 [ZJOI2015]幻想乡战略游戏

    传送门 考虑先随便找一个点作为根,然后再慢慢移动根,这样一步步走到最优的点 设 $sum[x]$ 表示节点 $x$ 的子树的军队数,$len(x,y)$ 表示 $x,y$ 之间边的长度 那么对于根节点 ...

  10. Codeforces - 675D 可持久化Treap 树形操作

    题意:模拟二叉树的构造过程,给出\(n\)个节点,每次从根插入,小于当前节点转到左儿子,否则右儿子,输出第\([2,n]\)个节点的父亲的权值 直接手动模拟会被链式结构T掉 网上找了下发现二叉树的性质 ...