js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs

一、获取鼠标坐标

  clientX:鼠标到可视区边缘的距离;    scrollLeft:滚动条到页面顶端的距离(不可视区的距离)

  兼容性写法:

  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

跟随鼠标移动的divs,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        div {
            width: 10px;
            height: 10px;
            background: #F00;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            document.onmousemove = function (ev) {
                var oEvent = ev || event;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                var oDivs = document.getElementsByTagName("div");

oDivs[0].style.left = oEvent.clientX + scrollLeft + "px";
                oDivs[0].style.top = oEvent.clientY + scrollTop + "px";

for (var i = oDivs.length - 1; i > 0; i--) {
                    oDivs[i].style.left = oDivs[i - 1].style.left;
                    oDivs[i].style.top = oDivs[i - 1].style.top;
                }
            }

}
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

时间: 2024-10-27 07:43:04

js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs的相关文章

JS事件(四)坐标位置

1.客户区坐标位置  (相对于客户端视口,而无关浏览器缩放) clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置. 2.页面坐标位置 pageX与pageY:包括页面滚动距离,代表鼠标在页面上的位置. 无滚动时,clientX==pageX,clientY==pageY 3.屏幕坐标位置 screenX与screenY:鼠标指针相对于整个屏幕的坐标位置 var div=document.getElementById("div"

原生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.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持

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

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.screenX/Y 二.分别讲解如下: clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 page

js获取鼠标坐标实例

js获取鼠标坐标实例,关键代码如下: 1.js 代码 /*显示坐标*/ function showTip(obj){ //if(!$.trim($(obj).html())) // return false; var event=window.event; var element=event.srcElement; //var X = $(obj).position().top; //var Y = $(obj).position().left; //alert(X+","+Y); v

js 获取元素坐标 和鼠标点击坐标

js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); alert(odiv.getBoundingClientRect().top); js 获取点击时间鼠标坐标 event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY

JavaScript-4.6鼠标事件监听,获取鼠标坐标window.event---ShinePans

<html> <head> <meta http-equiv="content-type" content="text/html" charset=GB2312"/> <title> 4.5 window.event应用 </title> <script> function body_onclick(){ alert("鼠标点击的坐标是\r\nx:"+event.x

JS事件(7)——事件类型——鼠标与滚轮事件

鼠标与滚轮事件 鼠标事件 “DOM3级事件”中定义了9个鼠标事件. click:在单击主鼠标按钮(一般是左键)或者按下回车时触发:这意味着onclick事件处理程序既可以通过鼠标也可以通过键盘执行. dbclick:双击主鼠标按钮(一般是左键)或者按下回车键时触发. mousedown:按下任意鼠标按钮时触发:不能通过键盘触发. mouseup:释放鼠标按钮时触发:不能通过键盘触发. mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发:这个事件不冒泡,而且光标移动到元素的后代

js事件对象坐标

js事件对象坐标---贴上代码 <body style="position:relative;width:100%;height:100%;padding:15px;margin:20px;"> <div style="position:absolute;top:100px;left:100px;width:500px;height:500px;padding:5px;margin:9px;background:#ddd;" onclick=&qu

获取鼠标坐标的动画

获取鼠标的坐标有e.pagX和e.pagY,这是获取他们的x,和y轴的值,在火狐和其他浏览器中都是用e来获取参数的,但IE8中是用window.event来获取参数的,它不支持e.pagX和e.pagY,在IE8中的pageX = clientX + 页面滚动出去的距离,这里就有个兼容问题,其实兼容问题,只要大概了解就行,会基本知道它封装的函数是什么原理,最主要还要会具体用在实例中. 那具体怎么用呢?一般在页面中有些窗口我们鼠标点上去可以拖着自由运动,还有滚动条啊,还有图片放大部分区域,都会用到