zoukankan      html  css  js  c++  java
  • JS 获取 鼠标 坐标

    event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) - document.body.clientLeft + "px";
    event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) - document.body.clientTop + "px";
    View Code
    function showDiv(i) {
        divSeat(i);
        
        document.getElementById('forumlist_menudiv'+i).style.display = "block"; //显示div
    }
    function hideDiv(i) {
        divSeat(i);
        document.getElementById('forumlist_menudiv'+i).style.display = "none"; //隐藏div
    }
    
    function divSeat(i) {
        var pos = getElementPos(document.getElementById("showmydiv"));
    //    document.getElementById("forumlist_menudiv"+i).style.left = pos[0] + 35 + "px";
        //    document.getElementById("forumlist_menudiv"+i).style.top = pos[1] + 23 + "px";
    
        document.getElementById("forumlist_menudiv" + i).style.left = event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) - document.body.clientLeft + "px";
        document.getElementById("forumlist_menudiv" + i).style.top = event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) - document.body.clientTop + "px";
    }
    function getElementPos(obj) {
        var left = 0;
        var top = 0;
    
        if (obj.x) {
            left = obj.x;
            top = obj.y;
        } else if (obj.offsetParent) {
            while (obj.offsetParent) {
                left += obj.offsetLeft;
                top += obj.offsetTop;
                obj = obj.offsetParent;
            }
        }
    
        return [left, top]; //作为一个数组返回
    }
    
    
    /*
    <style>
    .popupmenu_div{border:solid 1px #CCC; position:absolute; left:0; top:0; z-index:3000}
    .popupmenu_div dl{ padding:0px 0 0 0px; clear:both;}
    .popupmenu_div dl dt{ color:#666; padding-left:5px;}
    .popupmenu_div dl dd{ padding-left:25px;}
    .popupmenu_div dl dt a{ color:#666;}
    .popupmenu_div dl dt a:hover{ color:#666; text-decoration:underline;}
    .popupmenu_div dl dd a{ color:#0058A6;}
    .popupmenu_div dl dd a:hover{ color:#0058A6; text-decoration:underline;}
    </style>
    
    
    <div style="margin-left:600px" id="showmydiv"><div  onmouseout="hideDiv()" onmouseover="showDiv()">More</div></div>
    <div class="popupmenu_div" id="forumlist_menudiv" onmouseover="showDiv();" onmouseout="hideDiv()" style="display:none">
    <dl>
    <p >要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;要显示和隐藏的内容;</p>
      </dl>
    </div>
    */
  • 相关阅读:
    jquery 初篇
    python作用域和js作用域的比较
    javascript作用域
    第三篇、dom操作续
    dom事件
    第二篇 dom内容操作之value
    第三篇、变量
    第二篇、常量
    Node.js
    测试用例
  • 原文地址:https://www.cnblogs.com/wugang/p/2555096.html
Copyright © 2011-2022 走看看