• 想用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显示红色边框时,显示不出来,有谁看看是那的原因? 手头还有其他事,回头我再看看
  • 相关阅读:
    【CSP2019模拟】题解
    【Codeforces 868 G】— El Toll Caves(类欧几里得)
    【Codeforces 868 G】— El Toll Caves(类欧几里得)
    如何写出规范的代码? 做一名追求极致的软件工程师!
    浏览器原理
    URL(待整合到HTTP书中哦)
    FTP服务器
    background-image 和 img
    XML的总结学习
    逻辑思维 代码逻辑
  • 原文地址:https://www.cnblogs.com/gghxh/p/1049690.html
Copyright © 2020-2023  润新知