>웹 프론트엔드 >JS 튜토리얼 >IE, FF와 호환되는 드래그 레이어 효과!

IE, FF와 호환되는 드래그 레이어 효과!

PHP中文网
PHP中文网원래의
2016-05-16 19:23:44919검색

코드 복사 코드는 다음과 같습니다.




<머리>
    
    
    
    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 베타 <br>  <style rel="stylesheet" type="text/css" media="all" /> <br>  <!-- <br/>  body { <br/>    text-align:left; <br/>    여백:0; <br/>    글꼴: 일반 12px Verdana, Arial; <br/>    배경:#FFEEFF <br/>  } <br/>  양식 { <br/>    여백:0; <br/>    글꼴: 일반 12px Verdana, Arial; <br/>  } <br/>  테이블,입력 { <br/>    글꼴: 일반 12px Verdana, Arial; <br/>  } <br/>  a:link,a:visited{ <br/>    텍스트 장식:없음; <br/>    색상:#333333; <br/>  } <br/>  a:hover{ <br/>    텍스트 장식:없음; <br/>    색상:#FF6600 <br/>  } <br/>  #main { <br/>    너비:400px; <br/>    위치:절대; <br/>    왼쪽:600px; <br/>    상단:100px; <br/>    배경:#EFEFFF; <br/>    text-align:left; <br/>    필터:알파(불투명도=90) <br/>  } <br/>  #ChatHead { <br/>    text-align:right; <br/>    패딩:3px; <br/>    테두리:1px 단색 #003399; <br/>    배경:#DCDCFF; <br/>    글꼴 크기:11px; <br/>    색상:#3366FF; <br/>    커서:이동; <br/>  } <br/>  #ChatHead a:link,#ChatHead a:방문, { <br/>    글꼴 크기:14px; <br/>    font-weight:bold; <br/>    패딩:0 3px <br/>  } <br/>  #ChatBody { <br/>    테두리:1px solid #003399; <br/>    테두리 상단:없음; <br/>    패딩:2px; <br/>  } <br/>  #ChatContent { <br/>    높이:200px; <br/>    패딩:6px; <br/>    overflow-y:scroll; <br/>    단어 나누기: 모두 나누기 <br/>  } <br/>  #ChatBtn { <br/>    border-top:1px solid #003399; <br/>    패딩:2px <br/>  } <br/>  --> <br>  </style> <br>  <script 언어="javascript" type="text/javascript"> <br>  <!-- <br/>  함수 $(d){return document.getElementById(d);} <br/>  함수 gs(d){var t=$(d);if (t){return t .style;}else{return null;}} <br/>  기능 gs2(d,a){ <br/>    if (d.currentStyle){  <br/>      var curVal=d.currentStyle[a] <br/>    }else{ <br/>      var curVal=document.defaultView.getCompulatedStyle(d, null)[a] <br/>    }  <br/>    curVal 반환; <br/>  } <br/>  function ChatHidden(){gs("ChatBody").display = "none";} <br/>  function ChatShow(){gs("ChatBody").display = "";} <br/> function ChatClose(){gs("main").display = "none";} <br/>  function ChatSend(obj){ <br/>    var o = obj.ChatValue; <br/>    if (o.value.length>0){ <br>      $("ChatContent").innerHTML  = "<strong>Akon说:</strong>" o.value "<br/>"; <br>      o.value=''; <br>    } <br>  } <br><br>  if (document.getElementById){ <br>    ( <br>      function(){ <br>        if (window.opera){ document.write("<input type=' Hidden' id='Q' 값=' '>"); } <br><br>        var n = 500; <br>        var dragok = false; <br>        var y,x,d,dy,dx; <br><br>        함수 이동(e) <br>        { <br>         if (!e) e = window.event; <br>         if (dragok){ <br>            d.style.left = dx   e.clientX - x   "px"; <br>            d.style.top  = dy   e.clientY - y   "px" <br>           return false;         } <br> 🎜>        기능 다운(e) { <br>         if (!e) e = window.event; <br>         var temp =(typeof e.target != "undefine")?e.target:e.srcElement <br>         if (temp.tagName ! = "HTML"|"BODY" && temp.className != "dragclass"){ <br>            temp =(typeof temp.parentNode != "undefine")?temp.parentNode:temp.parentElement <br>          } <br>          if('TR'==temp.tagName){ <br>            temp = (typeof temp.parentNode != "undefine")?temp.parentNode:temp.parentElement; <br>            temp = (temp.parentNode 유형 != "정의되지 않음")?temp.parentNode:temp.parentElement; <br>            temp = (temp.parentNode 유형 != "정의되지 않음")?temp.parentNode:temp.parentElement; <br>          } <br><br>          if (temp.className == "dragclass"){ <br>            if(window.opera){ document.getElementById("Q").focus(); } <br>            dragok = true; <br>            temp.style.zIndex = n ; <br>            d = 온도; <br>            dx = parseInt(gs2(temp,"left"))|0; <br>            dy = parseInt(gs2(temp,"top"))|0; <br>            x = e.clientX; <br>            y = e.clientY; <br>            document.onmousemove = 이동; <br>            false를 반환합니다. <br>          } <br>        } <br><br>        function up(){ <br>          dragok = false; <br>          document.onmousemove = null; <br>        } <br><br>        document.onmousedown = down; <br>        document.onmouseup = 위; <br><br>      } <br>    )(); <br>  } <br>  --> <br>  </script> <br></head> <br><br><본문> <br><p id="main" class="dragclass" style="left:600px;top:300px;"> <br>  <p id="ChatHead"> <br>    <a href="#" onclick="ChatHidden();">-</a> <br>    <a href="#" onclick="ChatShow();"> </a> <br>    <a href="#" onclick="ChatClose();">x</a> <br>  </p> <br>  <p id="ChatBody"> <br>    <p id="ChatContent"></p> <br>    <p id="ChatBtn"> <br>      <form action="" name="chat" method="post"> <br>      <textarea name="ChatValue" rows="3" style="width:350px"></textarea> <br>      <input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" /> <br>      </form> <br>    </p> <br>  </p> <br></p> <br><br></body> <br></html><br></p> <p><br><strong>附解决问题的过程:</strong> <br>1、首先debug,看表现,就知道是在第一次点击的时候,对象的左右边距 Out错,变成0 <br>2, 找到代码中对应位置,输初因因,我之前已经知道currentStyle的效果,所以我不需要去网络上搜索상关资料 <br>4, 但是我不知道在firefox下如何处理 <br>5,我快就找到符合我目的的信息 <br>6、测试通过,发帖子。<br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명:</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사:<a class="dBlack" title="element.appendChild(newNode)를 통해 _javascript 기술에 대해 이야기해 보겠습니다." href="https://m.php.cn/ko/faq/26878.html">element.appendChild(newNode)를 통해 _javascript 기술에 대해 이야기해 보겠습니다.</a></span><span>다음 기사:<a class="dBlack" title="element.appendChild(newNode)를 통해 _javascript 기술에 대해 이야기해 보겠습니다." href="https://m.php.cn/ko/faq/26880.html">element.appendChild(newNode)를 통해 _javascript 기술에 대해 이야기해 보겠습니다.</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>