用js寫一個鼠標座標實例

時間 2019-12-19

原文原文鏈接

HTML代碼

寫一個div來做爲鼠標區域javascript

div中寫一個span顯示座標信息css

    <body>
        <div id="">
            <span></span>
        </div>
    </body>

給div和span增長樣式並定位java

        <style type="text/css">
            div{
                position: relative;/* 定位信息 */
                background-color: #398439;    /* 背景顏色 */
                width: 500px;    /* 寬度 */
                height: 500px;    /* 高度 */
            }
            span{
                position: absolute;/* 絕對定位 */
                color: red;    /* 文字顏色 */
            }
        </style>

添加事件spa

        <script type="text/javascript">
            window.onload = function(){    
                var oDiv = document.getElementsByTagName("div")[0];//獲取當元素節點
                var oSpan = oDiv.children[0];
                oDiv.onmousemove = function(e){    //鼠標移入事件
                    var evt = e || event;
                    var x = evt.offsetX;
                    var y = evt.offsetY;
                    oSpan.innerHTML = x + ',' + y + 'px';//顯示座標信息
                }
                /* 添加一個鼠標移出事件 */
                oDiv.onmouseout = function(){
                    oSpan.innerHTML = "";    //鼠標移除後 座標信息消失
                }
            }
        </script>

效果圖code

當鼠標移入的時候左上角顯示座標，移出隱藏。blog

相關標籤/搜索