怎样实现图片拉框放大的功能？

LZ想做GIS？
那直接用GIS软件mapinfo,arcgis好了

现在实现的差不多了，就是vml只能用在ie上

得到拉框中心点，然后用vml重新画过

转 http://www.blogjava.net/zhyiwww
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gbk">
        <title>拉框</title>
    </head>
    <body>
        <div id='lay1'
            onmousedown='down(event)'
            onmouseup='up(event)'
            onmousemove='move(event)'
            style='top:30px;left:30px;width:400px;height:400px;visibility:visible;border:solid 1px blue;'
        >
            <div id='rect'
                style='position:absolute;background-color: #FF99FF'
            >
        </div>
    </div>
        <script language="javascript">

            // 是否需要(允许)处理鼠标的移动事件,默认识不处理
            var select = false;

            var rect = document.getElementById("rect");
            // 设置默认值,目的是隐藏图层
            rect.style.width = 0;
            rect.style.height = 0;
            rect.style.visibility = 'hidden';
            //让你要画的图层位于最上层
            rect.style.zIndex = 1000;

            // 记录鼠标按下时的坐标
            var downX = 0;
            var downY = 0;
            // 记录鼠标抬起时候的坐标
            var mouseX2=downX;
            var mouseY2=downY;

            //处理鼠标按下事件
            function down(event){
                // 鼠标按下时才允许处理鼠标的移动事件
                select = true;
                //让你要画框的那个图层显示出来
                //rect.style.visibility = 'visible';
                // 取得鼠标按下时的坐标位置
                downX = event.clientX;
                downY = event.clientY;

                //设置你要画的矩形框的起点位置
                rect.style.left = downX;
                rect.style.top = downY;
            }

            //鼠标抬起事件
            function up(event){
                //鼠标抬起,就不允许在处理鼠标移动事件
                select = false;
                //隐藏图层
                rect.style.visibility = 'hidden';
            }

            //鼠标移动事件,最主要的事件
            function move(event){

                // 取得鼠标移动时的坐标位置
                mouseX2 = event.clientX;
                mouseY2 = event.clientY;

                // 设置拉框的大小
                rect.style.width = Math.abs( mouseX2 - downX );
                rect.style.height = Math.abs( mouseY2 - downY );

                /*

                这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
                我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.

                */
                if(select){

                   rect.style.visibility = 'visible';

                    // A part
                    if( mouseX2 < downX && mouseY2 < downY ){
                        rect.style.left = mouseX2;
                        rect.style.top = mouseY2 ;
                    }

                    // B part
                    if( mouseX2 > downX && mouseY2 < downY){
                        rect.style.left = downX ;
                        rect.style.top = mouseY2;
                    }

                    // C part
                    if( mouseX2 < downX && mouseY2 > downY){
                        rect.style.left = mouseX2;
                        rect.style.top = downY ;
                    }

                    // D part
                    if( mouseX2 > downX && mouseY2 > downY ){
                        rect.style.left = downX ;
                        rect.style.top = downY;
                    }

                }
                /*
                    这两句代码是最重要的时候,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,
                    拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.
                    这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,
                    这个部分我也理解的不是特别的清楚,如果你需要的话,你可以查资料.但是这两句话确实最核心的部分,
                    为了这两句话,为了实现鼠标拉框,我搞了几天的时间.
                */
          window.event.cancelBubble = true;
          window.event.returnValue = false;

                function getDivOffsetLeft(){
                    var lay1 = document.getElementById("lay1");
                    //var rect = document.getElementById("rect");
                    return lay1.offsetLeft;
                }
                function getDivOffsetTop(){
                    var lay1 = document.getElementById("lay1");
                    //var rect = document.getElementById("rect");
                    return lay1.offsetTop;
                }

            }



        </script>    </body></html>

调试易

怎样实现图片拉框放大的功能？

解决方案 »