zoukankan      html  css  js  c++  java
  • screenX clientX pageX的区别

    screenX clientX pageX概念

    screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。

    clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。

    pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动

    如图(红点就是鼠标当前位置)

    参考代码

     
    <!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>
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .div {
                text-align: center;
                font-size: 24px;
                height: 300px;
                 1300px;
                line-height: 300px;
                color: yellow;
            }
    
            #d1 {
                background-color: red;
            }
    
            #d2 {
                background-color: green;
    
            }
    
            #d3 {
                background-color: blue;
            }
    
            #d4 {
                position: absolute;
                background-color: yellow;
                height: 150px;
                 120px;
                top: 0;
            }
        </style>
        <script type="text/javascript">
    
            $(function () {
    
                window.onscroll = function () {
                    $("#d4").css("top", getScrollTop());
                };
    
                document.onmousemove = function (e) {
                    if (e == null) {
                        e = window.event;
                    }
                    var html = "screenX:" + e.screenX + "<br/>";
                    html += "screenY:" + e.screenY + "<br/><br/>";
                    html += "clientX:" + e.clientX + "<br/>";
                    html += "clientY:" + e.clientY + "<br/><br/>";
                    if (e.pageX == null) {
                        html += "pageX:" + e.x + "<br/>";
                        html += "pageY:" + e.y + "<br/>";
                    } else {
                        html += "pageX:" + e.pageX + "<br/>";
                        html += "pageY:" + e.pageY + "<br/>";
                    }
    
                    $("#d4").html(html);
                };
            });
    
            function getScrollTop() {
                var top = (document.documentElement && document.documentElement.scrollTop) ||
                  document.body.scrollTop;
                return top;
            }
        </script>
    </head>
    <body>
        <div id="d1" class="div">div1 height:300px 1300px</div>
        <div id="d2" class="div">div2 height:300px 1300px</div>
        <div id="d3" class="div">div3 height:300px 1300px</div>
        <div id="d4"></div>
    </body>
    </html>
  • 相关阅读:
    ORACLE 查看进程数,已执行任务数, 剩余任务数,删除指定任务
    ORACLE 收集统计整个用户数据
    解决Hystrix dashboard Turbine 一直 Loading…… 及其他坑
    利用 Maven 构造 Spring Cloud 微服务架构 模块使用 spring Boot构建
    AES加解密
    JAVA POI XSSFWorkbook导出扩展名为xlsx的Excel,附带weblogic 项目导出Excel文件错误的解决方案
    JAVA 文件的上传下载
    shell启停服务脚本模板
    JAVA 设计模式之 原型模式详解
    JAVA 设计模式之 工厂模式详解
  • 原文地址:https://www.cnblogs.com/zhwl/p/4424337.html
Copyright © 2011-2022 走看看