zoukankan      html  css  js  c++  java
  • 鼠标事件onmousemove的clientY

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <style>
        body{height:2000px;}
        #div1{width: 200px; height: 200px; background: red; position:absolute;}
        #div2{width:600px; height:1px; background:black; position:absolute; top:643px;}
    </style>
    <script>
        document.onmousemove = function(ev){
            var oEvent = ev||event;
            var oDiv = document.getElementById("div1");
    
            oDiv.style.left = oEvent.clientX + "px";
            oDiv.style.top = oEvent.clientY + "px";
        }
    </script>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
    </html>

    div1跟随鼠标指针移动,但是它的client无法超出可视区域的Y轴长度,再往下移动。
    如图:
    这里写图片描述

    解决方法:

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取scrollTop滚动距离
    oDiv.style.top = oEvent.clientY + scrollTop + "px";//clientY加上滚动距离即可。
  • 相关阅读:
    Ubuntu中的vsftpd配置
    Ubuntu学习-增加更新源及安装软件及卸载软件
    Ubuntu16.04下安装sublime text3
    需要读的书
    同一机器 部署 两个 jboss
    log4j 总结 精华
    oracle 笔记
    oracle 用户 多个表空间
    json
    json 基础
  • 原文地址:https://www.cnblogs.com/czm0718/p/5203932.html
Copyright © 2011-2022 走看看