<!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. 记号（notation）的学习

    数学的记号(notation) 记号具体代表什么含义,取决于你的定义: 比如这样的 d⃗  一个向量,每个分量 d(i) 表示的是从初始结点 v 到当前节点 vi 的最短路径:也即这样的一个向量的每一 ...

  2. http 协议上传文件multipart form-data boundary 说明--转载

    原文地址:http://xixinfei.iteye.com/blog/2002017 含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协 ...

  3. go语言函数作为参数传递

    go语言函数作为参数传递,目前给我的感觉几乎和C/C++一致.非常的灵活. import "fmt" import "time" func goFunc1(f ...

  4. 给VG增加磁盘，给文件目录增加空间

    一: #lspv 找到新增加的物理卷(逻辑驱动器,以hdisk8为例). #chdev –l hdisk8 –a pv=yes写入新的物理卷的pvid. #extendvg cwdatavg hdis ...

  5. CISP/CISA 每日一题 六

    CISA 每日一题(答) 采用电子数据交换 EDI 的好处: 1.较少的书面工作: 2.较少的信息交换错误: 3.改善了数据库到数据库.公司到公司的信息流: 4.没有多余的数据重新键入: 5.较少的通 ...

  6. Native开发与JNI机制详解

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 文/李森 博主导读:博主不是代码大师,研究什么都很深,Java除外,所以无论什么问题,方案可以提供, ...

  7. domino web app

         近期在做个项目内容是:原企业的OA仅仅能在电脑桌面处理流程,不能在手机上处理审核功能,但随着企业需求,管理者需求在随时使用手机审核文档,达到及时处理文档及流程的及时性.      要求:1) ...

  8. 一起talk C栗子吧（第九十八回：C语言实例--使用消息队列进行进程间通信二）

    各位看官们,大家好,上一回中咱们说的是使用消息队列进行进程间通信的样例.这一回咱们接着上一回的内容继续说使用消息队列进行进程间通信.闲话休提.言归正转.让我们一起talk C栗子吧! 我们在上一回中介 ...

  9. CentOS6 安装中文包和变更系统默认语言

    CentOS6 安装中文包和变更系统默认语言   用 yum 安装语言包的命令是 yum groupinstall <language>-support    ,其中 <langua ...

  10. ASP.NET MVC 入门4、Controller与Action

    原帖地址:http://www.cnblogs.com/QLeelulu/archive/2008/10/04/1303672.html Controller是MVC中比較重要的一部分.差点儿全部的业 ...