OU - jQuery 鼠标位置测试

jQuery 鼠标位置测试

Friday, May 2, 2008 7:11:08 AM

废话不多说，直接贴程序：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mouse Test</title>
<script type="text/javascript" src="jquery.pack.js"></script>
<style type="text/css" media="all">
    table.simple_grid {
        width:100%;
        height:100%;
        margin:0;padding:0;
        border:1px dashed #FF0000;
        border-collapse:collapse;
        border-spacing:0;
    }

    table.simple_grid td {
        border: 1px dashed #FF0000;
        text-align:center;
        vertical-align:middle;
    }
</style>
<script type="text/javascript">
    function getMousePosition(e){
        var x = 0, y = 0;
        var e = e || window.event;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else if (e.clientX || e.clientY) {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
        }
        return { 'x': x, 'y': y };
    }

    $(document).ready(function(){
        $('#mouse_test').mousemove(function(e){
            var o =  $(this).offset();
            var oX = o.left;
            var oY = o.top;
            $('#lblOriginXY').html(oX + ',' + oY);

            var cX = oX + $(this).width()/2;
            var cY = oY + $(this).height()/2;
            $('#lblCenterXY').html(cX + ',' + cY);

            pos = getMousePosition(e);
            var mouseX = pos.x;     //- this.offsetLeft;
            var mouseY = pos.y;     //- this.offsetTop;
            $('#lblMouseXY').html(mouseX + ',' + mouseY);

            if(mouseY < cY) {
                if(mouseX < cX) {
                    $('#lblInfo').html('左上').hide().fadeIn();
                } else {
                    $('#lblInfo').html('右上').hide().fadeIn();
                }
            } else {
                if(mouseX < cX) {
                    $('#lblInfo').html('左下').hide().fadeIn();
                } else {
                    $('#lblInfo').html('右下').hide().fadeIn();
                }
            }
        });
    });
</script>
</head>
<body>
    <div id="mouse_test">
        <table class="simple_grid">
            <tr height="50%">
                <td width="50%">Origin：<label id="lblOriginXY"></label></td>
                <td width="50%">Center：<label id="lblCenterXY"></label></td>
            </tr>
            <tr height="50%">
                <td width="50%">Mouse：<label id="lblMouseXY"></label></td>
                <td><label id="lblInfo"></label></td>
            </tr>
        </table>
    </div>
</body>
</html>

利用 ContentEditable 做 WYSIWYG 编辑器CodeMirror：浏览器内的高亮文本编辑器