• 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上,就没问题了。

  • 相关阅读:
    购物车案例详解。利用cookie
    设计模式8种
    设计模式介绍
    Promise
    面向对象-拖拽
    本地存储
    闭包和继承
    move.js
    CDM指南之Agent管理
    失业的程序员九创业就是一场戏
  • 原文地址:https://www.cnblogs.com/snowinmay/p/3024089.html
Copyright © 2020-2023  润新知