<!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. 转：Java的一道面试题----静态变量初始化过程

    public class Test{ private static Test tester = new Test(); //step 1 private static int count1; //st ...

  2. IAR FOR STM8 学习笔记 IAR工程的建立

    STM8是ST意法半导体针对工业应用和消费电子开发而推出的8位单片机. 每种MCU都有自身的优点与缺点,与其它8-bit MCU相比,STM8 8-bit MCU最大的特点是: · 内核: o 最高f ...

  3. Eclipse&STS常用小技巧

    开发是经常用到的代码可进行快捷提示,比如mian alt+/就提示出了main方法是不是很方便,为什么就能提示出来呢? 马上来了: 在你使用的java开发工具中点击Window--->Prefe ...

  4. BZOJ4044: [Cerc2014] Virus synthesis（回文树+DP）

    Description Viruses are usually bad for your health. How about fighting them with... other viruses? ...

  5. 目标跟踪系列十一：Exploiting the Circulant Structure of Tracking-by-detection with Kernels代码思路

    Tracking学习系列原创,转载标明出处: http://blog.csdn.net/ikerpeng/article/details/40144497 这篇文章非常赞啊!非常有必要将其好好的学习, ...

  6. 【JavaScript】--JavaScript总结一览无余

    对于 北风网李炎恢老师的JavaScript的视频也真的是醉了.视频整体来说结构清晰.内容比較简单.JS是一种灵活,开放的语言,语法规则并没有那么的死板.非常easy让人接受. JS的基础部分跟C#类 ...

  7. C#中数组与ArrayList的简单使用

    1. 多维数组 2. 锯齿数组 3. 数组的常用操作 4. ArrayList 1. 多维数组 多维数组:行数和列数在定义时已确定 string[,] arr = new string[2, 3]; ...

  8. String.Empty,NULL和""的区别

    String.Empty,NULL和""的区别 string.Empty就相当于"" 一般用于字符串的初始化 比如: string a; Console.Wri ...

  9. python相关系数

    皮尔逊相关系数: 用于度量两个变量X和Y之间的相关(线性相关),其值介于-1与1之间. 几组的点集,以及各个点集中和之间的相关系数.我们可以发现相关系数反映的是变量之间的线性关系和相关性的方向(第一排 ...

  10. Node.js笔记 http fs

    const http=require('http'); const fs=require('fs'); var server = http.createServer(function(req, res ...