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

PHP中文网
PHP中文网オリジナル
2016-05-16 19:23:44889ブラウズ

复制代码 代码如下:





    
    
    
    DoDi Chat v1.0 Beta
    
    




    


        -
        +
        x
    


    


        


        


            


            
            
            

        


    







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

复制代码 代码如下:



<script> <br>window.onload=function(){ <br>var t=document.getElementById('test') <br>var ts=t.style; <br>t.innerHTML= <br>"t.style.width:"+ts.width+"<br />"+ <br>"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ <br>"t.style.color:"+ts.color+"<br />"+ <br>"t.style.paddingLeft:"+ts.paddingLeft <br>} <br></script>





看到了没?前两个style 为空,后两个才有值。
如果是ie,问题很好解决,只要把style改成currentStyle即可。
IE Only

复制代码 代码如下:



<script> <br>window.onload=function(){ <br>var t=document.getElementById('test') <br>var ts=t.currentStyle; <br>t.innerHTML= <br>"t.style.width:"+ts.width+"<br />"+ <br>"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ <br>"t.style.color:"+ts.color+"<br />"+ <br>"t.style.paddingLeft:"+ts.paddingLeft <br>} <br></script>





FF only

复制代码 代码如下:



<script> <br>window.onload=function(){ <br>var t=document.getElementById('test') <br>var ts=document.defaultView.getComputedStyle(t, null); <br>t.innerHTML= <br>"t.style.width:"+ts.width+"<br />"+ <br>"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ <br>"t.style.color:"+ts.color+"<br />"+ <br>"t.style.paddingLeft:"+ts.paddingLeft <br>} <br></script>





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

最终效果

复制代码 代码如下:





  
  
  
  DoDi Chat v1.0 Beta
  
  




  


    -
    +
    x
  


  


    


    


      


      
      
      

    


  







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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。