可以移动的层

css 代码

"text/css">

.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;
}

 js 代码

<script language=< span="">"javascript">

    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.documentElement.clientWidth;
        var h =document.documentElement.clientHeight;
        var divObj = document.getElementById("cc");
        divObj.style.left = w/2;
        divObj.style.top = h/2;
    }
    //最大化
    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>

分享到：

Iterator(迭代器)的一般用法 | js的split用法

• 2007-08-16 12:42
• 浏览 2113
• 评论(4)
• 查看更多

评论

4 楼 xiuying 2008-10-10  

qichunren 写道

引用
//初始化层位置        function init(){            var w =document.documentElement.clientWidth;            var h =document.documentElement.clientHeight;            var divObj = document.getElementById("cc");            divObj.style.left = w/2;            divObj.style.top = h/2;        } 这段代码中的document.documentElement.clientWidth;  和document.documentElement.clientHeight;   好像有错啊! 我看了这段代码,估计你是想初始创建一个在屏幕上居中的层 我自己在网上查了查,改正后的代码应该是这样的 高:document.body.clientHeight; 宽:document.body.clientWidth; 它会随着页面的缩放而变化.

不会出错都可以获得只是
在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

3 楼 pacer123 2008-07-04  

好东西，收藏了

2 楼 qichunren 2008-02-17  

引用

//初始化层位置   
    function init(){   
        var w =document.documentElement.clientWidth;   
        var h =document.documentElement.clientHeight;   
        var divObj = document.getElementById("cc");   
        divObj.style.left = w/2;   
        divObj.style.top = h/2;   
    }

这段代码中的document.documentElement.clientWidth;  和document.documentElement.clientHeight;   好像有错啊!
我看了这段代码,估计你是想初始创建一个在屏幕上居中的层
我自己在网上查了查,改正后的代码应该是这样的
高:document.body.clientHeight;
宽:document.body.clientWidth;

它会随着页面的缩放而变化. 

1 楼 xiuying 2007-08-16  

html代码：

<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>