master

分支 (2)

管理

管理

master

dev_test

web-test
/
javascript 左上角拖拽放大缩小层的例子.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #drap_div{
            width: 200px;
            height: 200px;
            position: absolute;
            right:10px;
            bottom: 10px;
            background: #eeeeee;
            border: 2px #dddddd solid;
        }
        #drap_tool{
            position: absolute;
            top:0px;
            left: 0px;
            background: #cccccc;
            width: 10px;
            height: 10px;
            cursor:nw-resize;
        }
        </style>


    <script>
        function init(){
            var drop=false;
            var drapToolObj=document.getElementById("drap_tool");
            var drapDivObj=document.getElementById("drap_div");
            var windowWidth=document.body.clientWidth;
            var windowHeight=document.body.clientHeight;
            var drapObjRight;
            var drapObjBottom;

            drapToolObj.οnmοusedοwn=function(){
                drop=true;
                drapObjRight=windowWidth-drapDivObj.offsetLeft- drapDivObj.offsetWidth;
                drapObjBottom=windowHeight-drapDivObj.offsetTop- drapDivObj.offsetHeight;
            };
            drapToolObj.οnmοuseup=function(){
                drop=false;
            };
            document.οnmοuseup=function(){
                drop=false;
            };
            document.οnmοusemοve=function(e){
                var e=e?e:window.event;  //IE下事件E不存在，为window.event事件
                if(drop){
                    if(windowWidth-e.clientX-drapObjRight>10 && windowHeight-e.clientY-drapObjBottom>10){
                        drapDivObj.style.width= windowWidth-e.clientX-drapObjRight+"px";
                        drapDivObj.style.height= windowHeight-e.clientY-drapObjBottom+"px";
                    }
                }
            }

        }

    </script>
</head>
<body οnlοad="init()">
     <div id="drap_div">
         <div id="drap_tool"></div>
     </div>
</body>
</html>