鼠标选择区特效

鼠标选择区特效，有点击坐标，宽度和高度，并显示鼠标当前坐标。

<style type="text/css">
<!--
.alpha {
 filter:alpha(opacity=50); 
 -moz-opacity:0.5;
}
.alpha2 {
 filter:alpha(opacity=0); 
 -moz-opacity:0;
}
-->
</style>
告诉你一个应有尽有的网页特效网址：<a href="http://www.codesocang.com">http://www.codesocang.com</a>
<hr />
<!--最底层，容纳地图等元素-->
<button onclick="alert(getPoint())">得到坐标</button>
<div style="width:505px;height:580px; margin-left:auto; margin-right:auto; position:absolute; z-index:1; margin-left:40px; border:#666 1px dashed" id="basePanl" onmousedown="sDraw()" onmousemove="iDraw()" onmouseup="eDraw();" >
 <!--地图层-->
    <div style="width:100%; height:100%; position:absolute; z-index:10;" id="map">
     <!--img src="http://tczx.tancheng.gov.cn:8080/doc/map/0-China-stnader.gif" width="100%" height="100%" border="0" /-背景图还是隐藏了吧->
    </div>
    
    <!--信息提示区域-->
    <div style="background:#CCC; border:1px solid #666; position:absolute; z-index:20; width:150px; height:100px; left:0px; top: 0px; text-align:left; color:#09F; font-weight:bold; font-size:12px;" class="alpha" id="infoPanl"></div>
    <!--遮罩层-->
 <div style="width:100%;height:100%; position:absolute; z-index:30; background:#ff0" id="opDiv" class="alpha2">
    </div>
 
 <!--拖曳时划出的层-->
    <div style="background:#CCC; border:1px solid #666; position:absolute; z-index:50; width:0px; height:0px; left:0px; top: 0px; color:#F60;" class="alpha" id="theDiv"></div>
    
    
</div>
<script language="javascript">
    var theFlag = 0; //操作是否开始(1是；0否)
    var xs = 0; //鼠标按下时的初始x座标
    var ys = 0; //鼠标按下时的初始y座标
    var xe = 0; //鼠标松开时的初始x座标
    var ye = 0; //鼠标松开时的初始y座标
    var xc = 0; //当前鼠标x座标
    var yc = 0; //当前鼠标y座标
    var theDiv = document.getElementById("theDiv"); //拖曳时生成对象
    var basePanl = document.getElementById("basePanl"); //地图容器基本层
    var infoPanl = document.getElementById("infoPanl"); //信息显示层
    //拖曳开始
    function sDraw()
    {
        theFlag = 1;
        xs = getMouse()[0];
        ys = getMouse()[1];
        getMouse();
        showOffset();


    }
    //拖曳中
    function iDraw()
    {
        xc = getMouse()[0]; //当前位置
        yc = getMouse()[1];
        showOffset();
        if (theFlag == 1) //是否拖曳中
        {
            xe = getMouse()[0];
            ye = getMouse()[1];
            drawDiv();
        }
    }
    //拖曳结束
    function eDraw()
    {
        theFlag = 0;
        setCursor(""); //复原鼠标样式
    }
    //获得鼠标的坐标
    function getMouse()
    {
        x = parseInt(document.body.scrollLeft) + parseInt(event.clientX) - getoffset(basePanl)[0]; //鼠标x座标值
        y = parseInt(document.body.scrollTop) + parseInt(event.clientY) - getoffset(basePanl)[1]; //鼠标y座标值
        var rec = new Array(1);


        rec[0] = x;
        rec[1] = y;
        return rec
    }
    //获得指定元素的坐标
    function getoffset(e)
    {
        var t = e.offsetTop;
        var l = e.offsetLeft;
        while (e = e.offsetParent)
        {
            t += e.offsetTop;
            l += e.offsetLeft;
        }
        var rec = new Array(1);
        rec[0] = l;  //X坐标
        rec[1] = t;  //Y坐标
        return rec
    }
    //显示坐标信息
    function showOffset()
    {
        infoPanl.innerHTML = "First:[" + getPoint()[0] + ":" + getPoint()[1] + "]<br>Secord:[" + getPoint()[2] + ":" + getPoint()[3] + "]<br>current:[" + getPoint()[4] + ":" + getPoint()[5] + "]";
    }
    //生成选择区域DIV
    function drawDiv()
    {
        if (xe > xs)
        {
            theDiv.style.left = xs;
            theDiv.style.width = xe - xs;
            //判断方向以设置坐标
            if (ye > ys)
            { setCursor("se-resize"); }
            else
            { setCursor("ne-resize"); }
        }
        else
        {
            theDiv.style.left = xe;
            theDiv.style.width = xs - xe;
            //判断方向以设置坐标
            if (ye > ys)
            { setCursor("ne-resize"); }
            else
            { setCursor("se-resize"); }
        }


        if (ye > ys)
        {
            theDiv.style.top = ys;
            theDiv.style.height = ye - ys;


        }
        else
        {
            theDiv.style.top = ye;
            theDiv.style.height = ys - ye;
        }
    }
    //设置鼠标样式
    function setCursor(type)
    {
        document.getElementById("opDiv").style.cursor = type;
        document.getElementById("theDiv").style.cursor = type;
    }
    //得到坐标
    function getPoint()
    {
        var ret = new Array(6);


        ret[0] = (theDiv.style.left).replace("px", "");
        ret[1] = (theDiv.style.top).replace("px", "");
        ret[2] = xe;
        ret[3] = ye;
        ret[4] = xc;
        ret[5] = yc;
        ret[6] = theFlag;
        return ret;
    }
</script>