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

随机推荐

SDUT OJ 数据结构实验之链表五：单链表的拆分
数据结构实验之链表五:单链表的拆分 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...
gym 102082B dp
和51nod1055 一样: #include<iostream> #include<cstdio> #include<algorithm> #include< ...
Query on a tree 树链剖分 [模板]
You are given a tree (an acyclic undirected connected graph) with N nodes, and edges numbered 1, 2, ...
AF 与 PF区别
AF 表示ADDRESS FAMILY 地址族 PF 表示PROTOCL FAMILY 协议族 Winsock2.h中#define AF_INET 0#define PF_INET AF_INET ...
sqlalchemy orm数据类型验证方法比较
1.在定义ORM模型时校验 sqlalchemy提供validates函数支持对字段的校验 from sqlalchemy.orm import validates class EmailAddres ...
SVN：Access to 'xxx' forbidden
可以做以下尝试:
ui-grid 中cellTemplate中click事件
cellTemplate中使用的函数: 外部定义的函数:
MBR为什么不支持3T硬盘
MBR,全称为Master Boot Record,即硬盘的主引导记录.(是管理硬盘分区的一种模式.升级版是GPT) MBR保存在硬盘的第1个扇区(即硬盘的0柱面.0磁头.1扇区).它由三个部分组成, ...
坐标&接龙型动态规划 - 20181026
109. Triangle 此题还可以用DFS,记忆化搜索去做,二刷实现 public class Solution { /** * @param triangle: a list of lists ...
poj3187
一.题意:给定n,求1~n的一个排列,这个排列需要满足以下两个要求:1.杨辉三角最后的和为sum 2.字典序最小二.思路:暴力枚举每一个排列,然后计算和并与sum进行比较.这里我比较费解的是为什么 ...

JS监测鼠标指针位置

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

随机推荐

热门专题