您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 鼠标特效 >

    鼠标选择区特效

    时间:2013-05-09 11:05 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印
    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。

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

    <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>


    鼠标选择区特效由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/shubiaotexiao/4650.html
    标签:网站源码