需求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. 关于使用self.title文字不居中的解决办法

    最放发现,使用Segue在对视图切换,左上角的一般都是<Back 的一个Button控键或者是上一个视图的<title .因为上一个视图的title名字太长,导致当前视图的title被挤压 ...

  2. AtCoder - 2568 最小割

    There is a pond with a rectangular shape. The pond is divided into a grid with H rows and W columns ...

  3. 3、pandas

    原文出处: pandas.pydata.org   译文出处:石卓林 这是关于pandas的简短介绍,主要面向新用户.可以参阅Cookbook了解更复杂的使用方法. 链接:http://python. ...

  4. 50行代码实现python计算器主要功能

    实现功能:计算带有括号和四则运算的式子   3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...

  5. P4320 道路相遇

    [Luogu4320] 必经点数==圆方树上两点路径上圆点数 也就等于边数/2+1 没什么好说的 , 看代码 #include<cstdio> #include<iostream&g ...

  6. 洛谷 P2542 [AHOI2005]航线规划（Link-cut-tree）

    题面 洛谷 bzoj 题解 离线处理+LCT 有点像星球大战 我们可以倒着做,断边变成连边 我们可以把边变成一个点 连边时,如果两个点本身不联通,就\(val\)赋为\(1\),并连接这条边 如果,两 ...

  7. tp5.0

    入口文件绑定 : define('BIND_MODULE','admin/index'); 配置 auto_bind_moudle = ture|false.  入口自动绑定模块 入口文件 defin ...

  8. Axis 生成客户端client stub文件

    [转自] http://blog.csdn.net/qiao000_000/article/details/5568442 开发前,有个同事先给我们不熟悉Web Service的程序员进行了一些培训, ...

  9. js插件编程-tab框

    JS代码 (function (w) { //tab对象 function Tab(config) { //定义变量,防止变量污染 this.tabMenus=null; this.tabMains= ...

  10. 2019.03.28 读书笔记 关于lock

    多线程就离不开lock,lock的本质是一个语法糖,采用了监视器Monitor. lock的参数,错误方式有很多种,只需要记住一种:private static readonly object loc ...