<!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. 开发，从需求出发 &#183; 之三 春天在哪里

    <西游降魔>里面的<儿歌三百首>里面有首儿歌叫做<春天在哪里> 歌词是这种: 春天在哪里 春天在哪里 春天就在小朋友的眼睛里 通过俺的渣英语翻译之后是这种: whe ...

  2. 汉化 Hirens.BootCD 中的 XP 系统

    汉化 Hirens.BootCD 中的 XP 系统 1. 在中文版 XPSP3 镜像中提取所需的文件 原系统为没有作 server pack 的 Windows XP Professional ,在W ...

  3. listctrl调整表头高度

    CListCtrl派生类下CMyListCtrl.h class CMyListCtrl :public CListCtrl { public: // 设置表头高度 void SetHeadHeigh ...

  4. geotools修改shapefile 属性名乱码问题

    在GeoServer中文社区的讨论地址为:http://opengeo.cn/bbs/read.php?tid=1701&page=e&#a 使用geotools修改shapefile ...

  5. hdu5301(2015多校2)--Buildings（构造）

    Buildings Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Tota ...

  6. ASP.Net MVC Filter验证用户登录

    一.Filter是什么 ASP.NetMVC模式自带的过滤器Filter,是一种声明式编程方式,支持四种过滤器类型,各自是:Authorization(授权),Action(行为),Result(结果 ...

  7. 一起talk C栗子吧（第九回：C语言实例--最大公约数）

    各位看官们,大家好.从今天開始,我们讲大型章回体科技小说 :C栗子,也就是C语言实例.闲话休提, 言归正转.让我们一起talk C栗子吧! 看官们.上一回中咱们说的是素数的样例.这一回咱们说的样例是: ...

  8. 1.3 Quick Start中 Step 1: Download the code官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 不要局限于,这个版本,我只是以最新的版本,来做个引子,让大家对官网的各个kafka版 ...

  9. iOS开发RunLoop学习：一：RunLoop简单介绍

    一:RunLoop的简单介绍 #import "ViewController.h" @interface ViewController () @end @implementatio ...

  10. js进阶 14-3 如何接收load函数从后台接收到的返回数据

    js进阶 14-3 如何接收load函数从后台接收到的返回数据 一.总结 一句话总结:load方法的回调函数的参数即可接收从后台的返回数据. 1.load方法的回调函数的参数是什么? 语法:load( ...