创建一个可移动的层

最新推荐文章于 2022-10-23 22:32:18 发布

qichunren

最新推荐文章于 2022-10-23 22:32:18 发布

阅读量97

点赞数

大家好,我好想自己亲手写一个可以用鼠标拖动的层,可是我一点头绪也没有,从JAVAEYE上搜到了一篇文章,可是还是看不懂.
有谁知道这个原理,可是讲讲吗(最好写一点面向对象的js代码)?我想弄懂之后,创建一个JS 工具类,用来创建一个notice对话框.
谢谢您!!!! :oops:

javaeye上一网友的文章,他的地址我不记得了


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.divcc{    
    position:absolute;    
    border: 1px #FF99FF solid;    
    background-color:#FFFF99;     
    height:auto;     
    width:300px;     
    z-index:1000;    
}    

.divdd{    
    position:absolute;    
    border: 0px;    
    background-color:#FFFF80;     
    height:auto;     
    width:300px;     
    z-index:999;    
} 
</style>
<script>
function cursorover(){    
        document.getElementById("cc").style.cursor="move";    
    }    

    function cursorout(){    
        document.getElementById("cc").style.cursor="auto";    
    }    

    //可移动的层    
    var dragapproved=false;    
    var z,x,y;    

    function move(){    
        if (event.button==1&&dragapproved){    
            z.style.pixelLeft=temp1+event.clientX-x;    
            z.style.pixelTop=temp2+event.clientY-y;    
            return false;    
        }    
        if(event.button==2){    
            alert("别复制！！");    
            return false;    
        }    
    }    

    function drags(){    
        if (!document.all)    
            return;    
        if (event.srcElement.className=="divcc"){    
            dragapproved=true;    
            z=event.srcElement;    
            temp1=z.style.pixelLeft;    
            temp2=z.style.pixelTop;    
            x=event.clientX;    
            y=event.clientY;    
            document.onmousemove=move;    
        }    
    }    

    document.onmousedown=drags;    
    document.onmouseup=new Function("dragapproved=false");    
//--------------------------------------------------------------------------------------------------------------------------    

    //初始化层位置    
    function init(){    
        var w =document.body.clientWidth;    
        var h =document.body.clientHeight;    
        var divObj = document.getElementById("cc");    
        divObj.style.left = w/2;    
        divObj.style.top = h/2;
		alert('w:'+w);
		alert('h:'+h);
    }    
    //最大化    
    function max(){    
        document.getElementById("dd").style.display="inline";    
        var divObj = document.getElementById("cc");    
        divObj.style.width="300px";    
        var w =document.documentElement.clientWidth;    
        var h =document.documentElement.clientHeight;    
        divObj.style.left = w/2;    
        divObj.style.top = h/2;    
    }    
    //最小化    
    function min(){    
        document.getElementById("dd").style.display="none";    
        var divObj = document.getElementById("cc");    
        var w =document.documentElement.clientWidth;            //获得网页可见区域的宽度（不包括边框）    
        var h =document.documentElement.clientHeight;           //获得网页可见区域的高度（不包括边框）    
        divObj.style.width="150px";                             //设置层宽度    
        var myw = divObj.offsetWidth;                           //获得自身的宽度（包括边框）    
        var myh = divObj.offsetHeight;                          //获得自身的高度（包括边框）    
        var curw = w - myw;    
        var curh = h - myh;    
        divObj.style.left = curw;    
        divObj.style.top = curh;    
    }    
    //关闭    
    function clo(){    
        document.getElementById("cc").style.display="none";    
    }
</script>
</HEAD>

<BODY onload="init()"> 
<div id="cc" onmouseover="cursorover()" onmouseout="cursorout()" class="divcc"> 
<span style="height:20px;" onclick="max()">最大化</span> <span onclick="min()">最小化</span> <span onclick="clo()">关闭</span><br/> 
<div id="dd" class="divdd"> 
<table border="1px" cellpadding="0" cellspacing="0" bordercolor="#FF33CC" width="300px"> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
</tr> 
<tr> 
<td>4</td> 
<td>5</td> 
<td>6</td> 
</tr> 
<tr> 
<td>7</td> 
<td>8</td> 
<td>9</td> 
</tr> 
<tr> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
</tr> 
</table> 
</div> 

</div> 
</BODY>
</HTML>

document.documentElement与document.body是同一个对象吗?
答案是:
原来HTML里是document.body
XHTML里是document.documentElement
都指的是 <body >节点(OR元素)
可以这样兼容：


function   getBodyObj() 
{ 
return   (document.documentElement)   ?   document.documentElement   :   document.body   ; 
}

qichunren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建一个可移动的层

大家好,我好想自己亲手写一个可以用鼠标拖动的层,可是我一点头绪也没有,从JAVAEYE上搜到了一篇文章,可是还是看不懂.有谁知道这个原理,可是讲讲吗(最好写一点面向对象的js代码)?我想弄懂之后,创建一个JS 工具类,用来创建一个notice对话框.谢谢您!!!! :oops: javaeye上一网友的文章,他的地址我不记得了[code="java"] New ...
复制链接

扫一扫