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加上滚动距离即可。
  • 相关阅读:
    Source Insight新建工程文件
    移植3.4.2内核之韦东山笔记
    移植最新u-boot(裁剪和修改默认参数)
    C++与C语言在结构体上的区别
    VIP之Switch
    VIP之CSC
    VIP之Scaler
    VIP之FrameBuffer
    VIP之MixerII
    VIP之Clipper
  • 原文地址:https://www.cnblogs.com/czm0718/p/5203932.html
Copyright © 2011-2022 走看看