zoukankan      html  css  js  c++  java
  • 想用JS写一段鼠标拖拽调整图片大小的代码(未完)


    <script type="text/javascript">
    //<input ID="xy" /><input id="xy2" />
    //
    SetSizeByDrop('WebChart1');
    document.onmousemove = this_MouseMove;
    var oldCss = "";
    function SetSizeByDrop(ID)
    {
        
    var obj = document.getElementById(ID);
    //    var div = document.createElement('<div id="div' + ID + '"></div>');
    //
        obj.parentNode.insertBefore(div); div.insertBefore(obj);
    //
        div.style.height = obj.offsetHeight; div.style.width = obj.offsetWidth;
        obj.classname = 'vframe';
    }

    //鼠标移动事件
    function this_MouseMove(e){
        
    var e, obj;
        obj 
    = document.getElementById('WebChart1');
        e
    =window.event?window.event:e;
        SetDivFrameStyle(e,obj,oldCss);
    }

    //设置对象边框及光标样式
    function SetDivFrameStyle(e1,obj1,oldCss)
    {
        
    var b = SetCursorStyle(e1,obj1);
        
    if(b)
        
    {
            oldCss 
    = obj1.className;
            obj1.className 
    = 'vframe';
        }

        
    else
        
    {
            obj1.className 
    = oldCss;
        }

    }

    //设置光标样式
    function SetCursorStyle(e2,obj2)
    {
        obj2 
    = document.getElementById('WebChart1');
        
    var x,y,r,b,i,isL,isR,isT,isb;
        x 
    = e2.clientX; y = e2.clientY; i = 10;
        r 
    = obj2.offsetLeft+obj2.offsetWidth; b = obj2.offsetTop+obj2.offsetHeight; 
        isT 
    = similar(y,obj2.offsetTop,i);
        isB 
    = similar(y,b,i);
        isL 
    = similar(x,obj2.offsetLeft,i);
        isR 
    = similar(x,r,i);
    //    $('xy2').value = obj2.offsetLeft +" | 上"+ obj2.offsetTop +" | 右"+  r +" | 下"+ b;
    //
        $('xy').value = x +":"+ y + obj2.classname;
        if(isL && isT)  {obj2.style.cursor = "nw-resize";return true;}  //左上
        if(isL && isB)  {obj2.style.cursor = "sw-resize";return true;}
        
    if(isR && isT)  {obj2.style.cursor = "ne-resize";return true;}  //右上
        if(isR && isB)  {obj2.style.cursor = "se-resize";return true;}
        
    if(isL)  {obj2.style.cursor = "e-resize";return true;} //
        if(isR)  {obj2.style.cursor = "e-resize";return true;} //
        if(isT)  {obj2.style.cursor = "s-resize";return true;} //
        if(isB)  {obj2.style.cursor = "s-resize";return true;} //
        obj2.style.cursor = "";
        
    return false;
    }

    //比较n1与n2之差是否在模糊值i的范围之内
    function similar(n1,n2,i)
    {
        
    if(Math.abs(n1-n2)<=i) return true;
        
    else return false;
    }

    </script>
    在做到鼠标移到图片边框,让图片外的DIV显示红色边框时,显示不出来,有谁看看是那的原因? 手头还有其他事,回头我再看看
  • 相关阅读:
    vs2005设置断点不能调试问题(方法三为首选项,一般都可以解决)
    SQL中内连接和外连接的问题!
    javascript读写删cookie的简单方法
    数据库语句 select * from table where 1=1 的用法和作用
    gridview 和repeater 添加序号的方法
    asp.net Forms身份验证详解(转载)
    Asp.net中的认证与授权(转载)
    ASP.NET中前台javascript与后台代码调用
    android 模拟器不能上网解决方法
    大数据量系统架构
  • 原文地址:https://www.cnblogs.com/gghxh/p/1049690.html
Copyright © 2011-2022 走看看