zoukankan      html  css  js  c++  java
  • javascript鼠标后面跟当前坐标

    javascript鼠标后面跟当前坐标

    DEMO:http://blog.snowinmay.net/javascript/js-event2.html

    思路:

    1.用event.clientX和event.clientY取出当前坐标。

    2.用一个元素来放输出的内容(用innerHTML输出即可)。

    3.写容器的样式。

    //代码:

    <script type="text/javascript">
    ///document.onmousemove =
    function show_coords(event){
    var input = document.getElementById('input');
    var e = window.event||event;
    var x = e.clientX;
    var y = e.clientY;
    //input.value = x + "," + y;
    var say = document.getElementById('coords');
    say.innerHTML = "X:"+x+" Y:"+y;
    say.style.position = "absolute";
    say.style.left = x + 30;
    say.style.top = y;
    say.style.display = "inline-block";
    }

    </script>
    <style>
    2body{
    100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }
    span{
    padding: 0 5px;
    background: red;
    font-size: 12px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
    }
    </style>
    </head>
    <body onmousemove="show_coords(event)">
    <span id="coords"></span>
    </body>

    一开始将事件加载body上,发现对firefox会出现问题。后来把事件加在document上,就没问题了。

  • 相关阅读:
    十四
    十三
    十二
    十一
    用Linq从一个集合选取几列得到一个新的集合-可改列名
    LINQ入门(完结篇)
    LINQ入门(下篇)
    LINQ入门(中篇)
    LINQ入门(上篇)
    MVC中View往Controllers传数据的方式-已发
  • 原文地址:https://www.cnblogs.com/snowinmay/p/3024089.html
Copyright © 2011-2022 走看看