拖动层效果，兼容IE和FF!

软件发布|下载排行|最新软件

当前位置：首页 → IT学院 → IT技术 →

拖动层效果，兼容IE和FF!

  2020-05-11 我要评论
复制代码 代码如下:

<!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 ChatHidden()
    {
        document.getElementById("ChatBody").style.display = "none";
    }
    function ChatShow()
    {
        document.getElementById("ChatBody").style.display = "";
    }
    function ChatClose()
    {
        document.getElementById("main").style.display = "none";
    }
    function ChatSend(obj)
    {
        var o = obj.ChatValue;
        if (o.value.length>0){
            document.getElementById("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(temp.style.left+0);
                        dy = parseInt(temp.style.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">
    <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>

一个拖动效果，根据论坛的一些帖子改的，但还有一些BUG一直没法解决，谁能帮我改改？
当第一次拖动层时，层的位置会偏离很远。
呃。。。这涉及到一个style的问题。。。
在ie和firefox中，obj.style这个东西实际上只是取得元素中属性style中的值！
如下例，你会发现style块中的属性一个都取不到！
复制代码 代码如下:

<style>
#test{width:100px;background-color:red;}
</style>
<script>
window.onload=function(){
var t=document.getElementById('test')
var ts=t.style;
t.innerHTML=
"t.style.width:"+ts.width+"<br />"+
"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+
"t.style.color:"+ts.color+"<br />"+
"t.style.paddingLeft:"+ts.paddingLeft
}
</script>
<body>
<div id="test" style="color:yellow;padding-left:100px;">
</div>
</body>

看到了没？前两个style 为空，后两个才有值。
如果是ie，问题很好解决，只要把style改成currentStyle即可。
IE Only
复制代码 代码如下:

<style>
#test{width:100px;background-color:red;}
</style>
<script>
window.onload=function(){
var t=document.getElementById('test')
var ts=t.currentStyle;
t.innerHTML=
"t.style.width:"+ts.width+"<br />"+
"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+
"t.style.color:"+ts.color+"<br />"+
"t.style.paddingLeft:"+ts.paddingLeft
}
</script>
<body>
<div id="test" style="color:yellow;padding-left:100px;">
</div>
</body>

FF only
复制代码 代码如下:

<style>
#test{width:100px;background-color:red;}
</style>
<script>
window.onload=function(){
var t=document.getElementById('test')
var ts=document.defaultView.getComputedStyle(t, null);
t.innerHTML=
"t.style.width:"+ts.width+"<br />"+
"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+
"t.style.color:"+ts.color+"<br />"+
"t.style.paddingLeft:"+ts.paddingLeft
}
</script>
<body>
<div id="test" style="color:yellow;padding-left:100px;">
</div>
</body>

我绕了半天，你明白你的错误原因了吗？你的style全都是文档级style，而你试图获取left的时候，第一次获得的只是0,自然会把你的框给挪到边上去了。

最终效果
复制代码 代码如下:

<!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，看表现，就知道是在第一次点击的时候，对象的左右边距出错，变成0
2、找到代码中对应位置，输出left和top
3、知道原因，我之前已经知道currentStyle的效果，所以我不需要去网络上搜索相关资料
4、但是我不知道在firefox下如何处理
5、我在google里直接搜索“currentStyle firefox”，很快就找到符合我目的的信息
6、测试通过，发帖子。

相关文章

猜您喜欢

今日热门

Copyright 2022 版权所有 软件发布 访问手机版

声明：所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们