快捷導(dǎo)航

拖動(dòng)層效果，兼容IE和FF!

更新時(shí)間：2006年11月30日 00:00:00 作者：

最終效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
  <meta http-equiv="content-script-type" content="text/javascript"> 
  <meta http-equiv="content-style-type" content="text/css"> 
  <title>DoDi Chat v1.0 Beta</title> 
  <style rel="stylesheet" type="text/css" media="all" /> 
  <!-- 
  body { 
    text-align:left; 
    margin:0; 
    font:normal 12px Verdana, Arial; 
    background:#FFEEFF 
  } 
  form { 
    margin:0; 
    font:normal 12px Verdana, Arial; 
  } 
  table,input { 
    font:normal 12px Verdana, Arial; 
  } 
  a:link,a:visited{ 
    text-decoration:none; 
    color:#333333; 
  } 
  a:hover{ 
    text-decoration:none; 
    color:#FF6600 
  } 
  #main { 
    width:400px; 
    position:absolute; 
    left:600px; 
    top:100px; 
    background:#EFEFFF; 
    text-align:left; 
    filter:Alpha(opacity=90) 
  } 
  #ChatHead { 
    text-align:right; 
    padding:3px; 
    border:1px solid #003399; 
    background:#DCDCFF; 
    font-size:11px; 
    color:#3366FF; 
    cursor:move; 
  } 
  #ChatHead a:link,#ChatHead a:visited, { 
    font-size:14px; 
    font-weight:bold; 
    padding:0 3px 
  } 
  #ChatBody { 
    border:1px solid #003399; 
    border-top:none; 
    padding:2px; 
  } 
  #ChatContent { 
    height:200px; 
    padding:6px; 
    overflow-y:scroll; 
    word-break: break-all 
  } 
  #ChatBtn { 
    border-top:1px solid #003399; 
    padding:2px 
  } 
  --> 
  </style> 
  <script language="javascript" type="text/javascript"> 
  <!-- 
  function $(d){return document.getElementById(d);} 
  function gs(d){var t=$(d);if (t){return t.style;}else{return null;}} 
  function gs2(d,a){ 
    if (d.currentStyle){  
      var curVal=d.currentStyle[a] 
    }else{  
      var curVal=document.defaultView.getComputedStyle(d, null)[a] 
    }  
    return curVal; 
  } 
  function ChatHidden(){gs("ChatBody").display = "none";} 
  function ChatShow(){gs("ChatBody").display = "";} 
  function ChatClose(){gs("main").display = "none";} 
  function ChatSend(obj){ 
    var o = obj.ChatValue; 
    if (o.value.length>0){ 
      $("ChatContent").innerHTML += "<strong>Akon說：</strong>"+o.value+"<br/>"; 
      o.value=''; 
    } 
  } 

  if  (document.getElementById){ 
    ( 
      function(){ 
        if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); } 

        var n = 500; 
        var dragok = false; 
        var y,x,d,dy,dx; 

        function move(e) 
        { 
          if (!e) e = window.event; 
          if (dragok){ 
            d.style.left = dx + e.clientX - x + "px"; 
            d.style.top  = dy + e.clientY - y + "px"; 
            return false; 
          } 
        } 

        function down(e){ 
          if (!e) e = window.event; 
          var temp = (typeof e.target != "undefined")?e.target:e.srcElement; 
          if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ 
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
          } 
          if('TR'==temp.tagName){ 
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
          } 

          if (temp.className == "dragclass"){ 
            if (window.opera){ document.getElementById("Q").focus(); } 
            dragok = true; 
            temp.style.zIndex = n++; 
            d = temp; 
            dx = parseInt(gs2(temp,"left"))|0; 
            dy = parseInt(gs2(temp,"top"))|0; 
            x = e.clientX; 
            y = e.clientY; 
            document.onmousemove = move; 
            return false; 
          } 
        } 

        function up(){ 
          dragok = false; 
          document.onmousemove = null; 
        } 

        document.onmousedown = down; 
        document.onmouseup = up; 

      } 
    )(); 
  } 
  --> 
  </script> 
</head> 

<body> 
<div id="main" class="dragclass" style="left:600px;top:300px;"> 
  <div id="ChatHead"> 
    <a href="#" onclick="ChatHidden();">-</a> 
    <a href="#" onclick="ChatShow();">+</a> 
    <a href="#" onclick="ChatClose();">x</a> 
  </div> 
  <div id="ChatBody"> 
    <div id="ChatContent"></div> 
    <div id="ChatBtn"> 
      <form action="" name="chat" method="post"> 
      <textarea name="ChatValue" rows="3" style="width:350px"></textarea> 
      <input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" /> 
      </form> 
    </div> 
  </div> 
</div> 

</body> 
</html>

附解決問題的過程：
1、首先debug，看表現(xiàn)，就知道是在第一次點(diǎn)擊的時(shí)候，對(duì)象的左右邊距出錯(cuò)，變成0
2、找到代碼中對(duì)應(yīng)位置，輸出left和top
3、知道原因，我之前已經(jīng)知道currentStyle的效果，所以我不需要去網(wǎng)絡(luò)上搜索相關(guān)資料
4、但是我不知道在firefox下如何處理
5、我在google里直接搜索“currentStyle firefox”，很快就找到符合我目的的信息
6、測(cè)試通過，發(fā)帖子。