zoukankan      html  css  js  c++  java
  • 获取鼠标坐标并且根据鼠标位置不同弹出不同内容

    获取鼠标坐标,并且根据鼠标所在div弹出不同内容:

    <!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>
    <head>
    <title>鼠标的距离</title>
    <script type="text/javascript">
    var mouseX;
    var mouseY;
    function show(event) {
     var infoDiv = document.getElementById('infoDiv');
     mouseOver(event);
        document.getElementById("a").innerHTML = mouseX+" "+mouseY ;
        infoDiv.style.display = "block";
     //infoDiv.innerHTML = mouseX+" "+mouseY;
        infoDiv.style.left = mouseX + 10 + "px";
        infoDiv.style.top = mouseY + 10 + "px";    
    }
    function hide() {
        var infoDiv = document.getElementById('infoDiv').style.display = "none";;
    }
    function mouseOver(obj) {
        e = obj || window.event;
        // 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离.
        mouseX =  e.layerX|| e.offsetX;
        mouseY =  e.layerY|| e.offsetY; 
        if(e.target.id == "aaa")
        {
            infoDiv.innerHTML = "aaa";
        }
        else if(e.target.id == "bbb")
        {
            infoDiv.innerHTML = "bbb";
        }
        else if(e.target.id == "ccc")
        {
            infoDiv.innerHTML = "ccc";
        }
        else if(e.target.id == "ddd")
        {
            infoDiv.innerHTML = "ddd";
        }else{
            infoDiv.innerHTML = "eee";
            }
        
        
    }
    </script>
    </head>
    <body>
    <div onmousemove="show(event);" onmouseout="hide();" style="margin:150px ; background:#ff0; height:300px; 300px; position:relative; ">鼠标相对于触发事件元素的位置<strong id="a"></strong>
        <div id="aaa">aaa</div>
        <div id="bbb">bbb</div>
        <div id="ccc">ccc</div>
        <div id="ddd">ddd</div>
      <div id="infoDiv" style="display: none; position: absolute;  100px; height: 100px; background-color: #F1F19B;"></div>
    </div>
    </body>
    </html>
  • 相关阅读:
    DOS系统功能调用与BIOS中断调用 [转自KingofCoders]
    纯手工保护光盘数据(转)
    程序员不错的建议【转】
    初识逆向技术(转)
    Notepad++插件推荐JSMin
    jQuery Ready 与 Window onload 的区别
    Javascript typeof和instanceof判断数据类型
    浅谈Javascript 中几种克隆(clone)方式
    Javascript Array sort排序问题
    不同浏览器对display为none元素的图片处理不一样
  • 原文地址:https://www.cnblogs.com/gaobint/p/6986901.html
Copyright © 2011-2022 走看看