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

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS获得鼠标位置（兼容多浏览器ie,firefox）脚本之家修正版</title>

</head> 

<body> 

<script>

function mouseMove(ev)

{

ev= ev || window.event;

var mousePos = mouseCoords(ev);

//alert(ev.pageX);

document.getElementById("xxx").value = mousePos.x;

document.getElementById("yyy").value = mousePos.y;

} 

function mouseCoords(ev)

{

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

} 

document.onmousemove = mouseMove;

</script>

鼠标 X 轴:

<input id=xxx type=text> 

鼠标 Y 轴:

<input id=yyy type=text>

</body>

拖拽小案例

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果</title>

<style>

#div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; }

#img1 { position:absolute}

</style>

<script>

window.onload = function(){

    var oDiv = document.getElementById('div1');

    var oImg = document.getElementById('img1');  

    tqfc(oDiv);

    tqfc(oImg);  

    function tqfc(obj){

            obj.onmousedown = function(ev){

            var ev = ev || event;

            var oDivX = ev.clientX - this.offsetLeft;

            var oDivY = ev.clientY - this.offsetTop;

            obj.style.backgroundColor = 'red';  

            //加入兼容问题

            if(obj.setCapture){

                obj.setCapture();

                }  

            document.onmousemove = function(ev){  //注意这里是document

                var ev = ev || event;

                L = ev.clientX - oDivX;

                T = ev.clientY - oDivY;  

                //限制不超出可视范围

                if(L<100){  //磁性吸附重点在于这里,原本是0,改成100

                    L = 0;

                    }else if(L>document.documentElement.clientWidth - obj.offsetWidth){

                        L = document.documentElement.clientWidth - obj.offsetWidth;

                        }  

                if(T<0){

                    T = 0;

                    }else if(T>document.documentElement.clientHeight - obj.offsetHeight){

                        T = document.documentElement.clientHeight - obj.offsetHeight;

                        }  

                obj.style.left = L + 'px';

                obj.style.top = T + 'px';

                }

            return false;

            }

            obj.onmouseup = function(){

            document.onmousedown = document.onmousemove = null;

            obj.style.backgroundColor = '#7391C5';  

            //加入兼容问题

            if( obj.releaseCapture ){

                obj.releaseCapture();

                }

            }

        }  

    }

</script>

</head>

<body>

<div id="div1"></div>

<img src="标签图片/1.JPG" width="100" id="img1"/>

</body>

</html>

js 鼠标坐标的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  2. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  3. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

  4. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

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

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

  6. js实时显示鼠标坐标

    <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title ...

  7. JS 获取鼠标坐标

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

  8. js 鼠标和键盘事件

    js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...

  9. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. js35

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. Mahout项目开发环境搭建（Eclipse\MyEclipse + Maven）

    继续 http://www.tuicool.com/articles/rmiEz2 http://www.cnblogs.com/jchubby/p/4454888.html

  3. sass自定义滚动条样式

    @mixin scrollBarStyle() { &::-webkit-scrollbar { width: 7px; height: 7px; } &::-webkit-scrol ...

  4. BZOJ4817: [Sdoi2017]树点涂色(LCT)

    Description Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同.定义一条路 径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. ...

  5. python3操作Excel

    1.安装openpyxl模块: 在cmd命令窗执行命令 pip install openpyxl    安装openpyxl模块 from openpyxl import load_workbook ...

  6. 【Thinkphp学习】TP3.2.3在PHP5.5环境下运行非常慢

    在做项目时遇到了一个瓶颈问题:老项目迁移到PHP5.5环境后打开网页很卡很慢. 服务器环境为:apache+php5.5.38+mysql,使用框架为Thinkphp3.2.3. 经过多方面排查找到了 ...

  7. 《开源公开课分享》：Java开源框架案例分享

        缺乏高端技术人才?缺乏开发标准?    代码复用性低?技术风险难于把控?     招聘成本高?培训成本高?    假设想法不够雄伟,那么就会局限于细节:假设一開始就铺很大的摊子,将会失去控制: ...

  8. 13.constexpr

    #include <iostream> using namespace std; //声明返回值为常量表达式 constexpr int get() { ; return num; } v ...

  9. Android 通过SOCKET下载文件的方法

    本文实例讲述了Android通过SOCKET下载文件的方法.分享给大家供大家参考,具体如下: 服务端代码 import java.io.BufferedInputStream; import java ...

  10. 韦东山网课https://edu.csdn.net/course/play/207/1117

    接口讲解https://edu.csdn.net/course/play/207/1117