可移动层的实现示例

2012年4月2日 发表评论 阅读评论
  1. Made In Zeal 转载请保留原始链接:http://www.zeali.net/entry/12
  2. <HTML>  
  3.   
  4. <HEAD>  
  5.   
  6. <script language=javascript>  
  7.   
  8. // bigin fly bar   
  9.   
  10. var bIsCatchFlyBar = false;   
  11.   
  12. var dragClickX = 0;   
  13.   
  14. var dragClickY = 0;   
  15.   
  16. function HideFlyBar(){   
  17.   
  18. divFlyBar.style.visibility = "hidden";   
  19.   
  20. myFlyBarRestorButton.style.display = ;   
  21.   
  22. }   
  23.   
  24.   
  25. function openFlyBar(){   
  26.   
  27. myload_flybar();   
  28.   
  29. divFlyBar.style.visibility = "visible";   
  30.   
  31. myFlyBarRestorButton.style.display = "none";   
  32.   
  33. }   
  34.   
  35. function catchFlyBar(e){   
  36.   
  37. bIsCatchFlyBar = true;   
  38.   
  39. var x=event.x+document.body.scrollLeft;   
  40.   
  41. var y=event.y+document.body.scrollTop;   
  42.   
  43. dragClickX=x-divFlyBar.style.pixelLeft;   
  44.   
  45. dragClickY=y-divFlyBar.style.pixelTop;   
  46.   
  47. divFlyBar.setCapture();   
  48.   
  49. document.onmousemove = moveFlyBar;   
  50.   
  51. }   
  52.   
  53. function releaseFlyBar(e){   
  54.   
  55. bIsCatchFlyBar = false;   
  56.   
  57. divFlyBar.releaseCapture();   
  58.   
  59. document.onmousemove = null;   
  60.   
  61. }   
  62.   
  63. function moveFlyBar(e){   
  64.   
  65. if(bIsCatchFlyBar){   
  66.   
  67. divFlyBar.style.left = event.x+document.body.scrollLeft-dragClickX;   
  68.   
  69. divFlyBar.style.top = event.y+document.body.scrollTop-dragClickY;   
  70.   
  71. }   
  72.   
  73. }   
  74.   
  75. function myload_flybar(){   
  76.   
  77. divFlyBar.style.top=document.body.scrollTop;   
  78.   
  79. divFlyBar.style.left=document.body.offsetWidth-divFlyBar.clientWidth-30+document.body.scrollLeft;   
  80.   
  81. }   
  82.   
  83.   
  84. window.onresize = myload_flybar;   
  85.   
  86. window.onscroll = myload_flybar;   
  87.   
  88. window.onload = openFlyBar;   
  89.   
  90. // end fly bar   
  91.   
  92. </script>  
  93.   
  94. </HEAD>  
  95.   
  96.   
  97. <BODY>  
  98.   
  99. <div id=divFlyBar onMouseDown="catchFlyBar()" onMouseUp="releaseFlyBar()" style=‘position:absolute;top:0;left:1;visibility:hidden;cursor:move;z-index:100′>  
  100.   
  101. <table style="filter:alpha(opacity=90);background-color:#9A9A9A;" width=192 border="0" cellspacing="1" cellpadding="0"><tr><td><table width=100% border=0 cellpadding=0 cellspacing=0><tr valign=middle style="background-color:#212121;"><td><img src="http://www.zeali.net/pic/z-smallLogo.gif" align="absmiddle" border=0 width=12 height=12></td><td style="font-size:12px;color:#F4F4F4;font-weight:bold" width=100% align=left> Z-Tips</td><td align=right valign=top><img src="http://www.zeali.net/pic/button-Close.gif" onclick=javascript:HideFlyBar() alt="关闭X" title="关闭X" width=11 height=11 border=0 align="absmiddle" onmouseover="divFlyBar.style.cursor=’hand’;" onmouseout="divFlyBar.style.cursor=’move’;"></td></tr></table></td></tr>  
  102.   
  103. <tr id=flyTailerTr name=flyTailerTr><td id=flyTailerHolder name=flyTailerHolder style=‘background-color:#eeeeee;color:black;font-weight:bold;font-size:12px;font-family:Courier New;’ align=center>  
  104.   
  105. 在这里放置你想放的东西<br>  
  106.   
  107. 在这里放置你想放的东西<br>  
  108.   
  109. 在这里放置你想放的东西<br>  
  110.   
  111. 在这里放置你想放的东西<br>  
  112.   
  113. 在这里放置你想放的东西<br>  
  114.   
  115. </td></tr>  
  116.   
  117. </table>  
  118.   
  119. </div>  
  120.   
  121. <div id=myFlyBarRestorButton name=myFlyBarRestorButton align=center valign=middle><input type=button value=‘▲ 显示 ▲’ onclick=javascript:openFlyBar()></div>  
  122.   
  123. </BODY>  
  124.   
  125. </HTML>  
  126. —————————————————————– 我把这个代码改写了一下,能兼容FireFox了
    // begin fly bar
    var bIsCatchFlyBar = false;
    var cur_divX = 0;
    var cur_divY = 0;

    function catchFlyBar(event)
    {
    bIsCatchFlyBar = true;
    var cursorX = event.clientX;
    var cursorY = event.clientY;
    cur_divX = cursorX – document.getElementById("showdiv").style.left.split("p")[0];
    cur_divY = cursorY – document.getElementById("showdiv").style.top.split("p")[0];
    if(isIE)
    {
    movediv.setCapture();
    document.onmousemove = moveFlyBar;
    }
    else
    {
    window.captureEvents(Event.MOUSEMOVE);
    window.onmousemove = moveFlyBar(event);
    }
    }

    function releaseFlyBar(event){
    bIsCatchFlyBar = false;
    if(isIE)
    {
    movediv.releaseCapture();
    document.onmousemove = null;
    }
    else
    {
    window.releaseEvents(Event.MOUSEMOVE);
    window.onmousemove = null;
    }
    }

    function moveFlyBar(evt)
    {
    if(bIsCatchFlyBar)
    {
    if(isIE)
    {
    document.getElementById("showdiv").style.left = (event.clientX – cur_divX) + "px";
    document.getElementById("showdiv").style.top = (event.clientY – cur_divY) + "px";
    }
    else
    {
    document.getElementById("showdiv").style.left = (evt.clientX – cur_divX) + "px";
    document.getElementById("showdiv").style.top = (evt.clientY – cur_divY) + "px";
    }
    }
    }

备注:

如下:
<SCRIPT LANGUAGE="JavaScript">
var s;
s += "\r\n网页可见区域宽:"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页可见区域宽:"+ document.body.offsetWidth? +" (包括边线的宽)";
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>  


转载请注明来自:[MSN Spaces]http://msn.shandian.biz/352.html

  1. 本文目前尚无任何评论.