2007-08-16

可以移动的层

css 代码
  1. "text/css">   
  2.   
  3. .divcc{   
  4.     position:absolute;   
  5.     border: 1px #FF99FF solid;   
  6.     background-color:#FFFF99;    
  7.     height:auto;    
  8.     width:300px;    
  9.     z-index:1000;   
  10. }   
  11.   
  12. .divdd{   
  13.     position:absolute;   
  14.     border: 0px;   
  15.     background-color:#FFFF80;    
  16.     height:auto;    
  17.     width:300px;    
  18.     z-index:999;   
  19. }   
  20.   
  21.   

  •  js 代码

    1. "javascript">   
    2.   
    3.     function cursorover(){   
    4.         document.getElementById("cc").style.cursor="move";   
    5.     }   
    6.   
    7.     function cursorout(){   
    8.         document.getElementById("cc").style.cursor="auto";   
    9.     }   
    10.   
    11.     //可移动的层   
    12.     var dragapproved=false;   
    13.     var z,x,y;   
    14.   
    15.     function move(){   
    16.         if (event.button==1&&dragapproved){   
    17.             z.style.pixelLeft=temp1+event.clientX-x;   
    18.             z.style.pixelTop=temp2+event.clientY-y;   
    19.             return false;   
    20.         }   
    21.         if(event.button==2){   
    22.             alert("别复制！！");   
    23.             return false;   
    24.         }   
    25.     }   
    26.   
    27.     function drags(){   
    28.         if (!document.all)   
    29.             return;   
    30.         if (event.srcElement.className=="divcc"){   
    31.             dragapproved=true;   
    32.             z=event.srcElement;   
    33.             temp1=z.style.pixelLeft;   
    34.             temp2=z.style.pixelTop;   
    35.             x=event.clientX;   
    36.             y=event.clientY;   
    37.             document.onmousemove=move;   
    38.         }   
    39.     }   
    40.   
    41.     document.onmousedown=drags;   
    42.     document.onmouseup=new Function("dragapproved=false");   
    43. //--------------------------------------------------------------------------------------------------------------------------   
    44.   
    45.     //初始化层位置   
    46.     function init(){   
    47.         var w =document.documentElement.clientWidth;   
    48.         var h =document.documentElement.clientHeight;   
    49.         var divObj = document.getElementById("cc");   
    50.         divObj.style.left = w/2;   
    51.         divObj.style.top = h/2;   
    52.     }   
    53.     //最大化   
    54.     function max(){   
    55.         document.getElementById("dd").style.display="inline";   
    56.         var divObj = document.getElementById("cc");   
    57.         divObj.style.width="300px";   
    58.         var w =document.documentElement.clientWidth;   
    59.         var h =document.documentElement.clientHeight;   
    60.         divObj.style.left = w/2;   
    61.         divObj.style.top = h/2;   
    62.     }   
    63.     //最小化   
    64.     function min(){   
    65.         document.getElementById("dd").style.display="none";   
    66.         var divObj = document.getElementById("cc");   
    67.         var w =document.documentElement.clientWidth;            //获得网页可见区域的宽度（不包括边框）   
    68.         var h =document.documentElement.clientHeight;           //获得网页可见区域的高度（不包括边框）   
    69.         divObj.style.width="150px";                             //设置层宽度   
    70.         var myw = divObj.offsetWidth;                           //获得自身的宽度（包括边框）   
    71.         var myh = divObj.offsetHeight;                          //获得自身的高度（包括边框）   
    72.         var curw = w - myw;   
    73.         var curh = h - myh;   
    74.         divObj.style.left = curw;   
    75.         divObj.style.top = curh;   
    76.     }   
    77.     //关闭   
    78.     function clo(){   
    79.         document.getElementById("cc").style.display="none";   
    80.     }   
    81.   
    • 评论
    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高）
    pacer123 2008-07-04   回复
    好东西，收藏了
    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;

    它会随着页面的缩放而变化.
    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>
    发表评论

    您还没有登录，请登录后发表评论

    xiuying
    搜索本博客
    我的相册
    Adaf8b71-c4d9-43a8-b9a1-e614b7784297-thumb
    waiting
    共 10 张
    最近加入圈子
    存档
    最新评论