• 取得当前鼠标的X,Y坐标


    为了让鼠标移到小图上显示大图,我利用鼠标事件新建了一个层来显示大图.当然之前最好得到XY坐标

    取得当前鼠标的X,Y坐标
    function SelfXY(){
        var yScrolltop;
        var xScrollleft;
        if (self.pageYOffset || self.pageXOffset) {
            yScrolltop = self.pageYOffset;
            xScrollleft = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){     // Explorer 6 Strict
            yScrolltop = document.documentElement.scrollTop;
            xScrollleft = document.documentElement.scrollLeft;
        } else if (document.body) {// all other Explorers
            yScrolltop = document.body.scrollTop;
            xScrollleft = document.body.scrollLeft;
        }
        arrayPageScroll = new Array(xScrollleft + event.clientX ,yScrolltop + event.clientY)
        return arrayPageScroll;
    }

    附:鼠标及对象坐标控制属性
    offsetTop
    获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

    offsetLeft
    获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

    offsetHeight
    获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
    IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
    NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

    offsetWidth
    获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

    offsetParent
    获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。


    clientHeight
    获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
    大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

    clientLeft
    获取 offsetLeft 属性和客户区域的实际左边之间的距离。

    clientTop
    获取 offsetTop 属性和客户区域的实际顶端之间的距离。

    clientWidth
    获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。


    SCROLL属性
    scroll
    设置或获取滚动是否关闭。

    scrollHeight
    获取对象的滚动高度。

    scrollLeft
    设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

    scrollTop
    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

    scrollWidth
    获取对象的滚动宽度。

    event属性
    x
    设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

    screenX
    设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标

    offsetX
    设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

    clientX
    设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条
  • 相关阅读:
    HDU 2460 Network 傻逼Tarjan
    HTTP状态码
    Spring Tool Suite(STS)安装
    Manajro17配置
    VsCode搭建Java开发环境
    《从零开始搭建游戏服务器》项目管理工具Maven
    Debian9安装MariaDB
    Intellij从无到有创建项目
    PostgreSQL 二进制安装
    Intellij IDEA创建项目
  • 原文地址:https://www.cnblogs.com/skylaugh/p/719277.html
Copyright © 2020-2023  润新知