Collision_javascript 기술을 결정하는 JS 방법

이 글의 예시에서는 JS에서 충돌을 판단하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

JS 충돌 방법:

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

/**충돌이 있는지 확인
* @param obj 원본 개체
* @param dobj 대상 개체
​*/
함수 영향(obj, dobj) {
var o = {
          x: getDefaultStyle(obj, '왼쪽'),
      y: getDefaultStyle(obj, 'top'),
           w: getDefaultStyle(obj, '너비'),
h: getDefaultStyle(obj, '높이')
}  

var d = {
          x: getDefaultStyle(dobj, '왼쪽'),
      y: getDefaultStyle(dobj, 'top'),
           w: getDefaultStyle(dobj, '너비'),
h: getDefaultStyle(dobj, '높이')
}  

var px, py

px = o.x <= d.x ? d.x : o.x; py = o.y

// 점이 두 객체 모두에 있는지 확인
if (px >= o.x && px <= o.x o.w && py >= o.y && py <= o.y o.h && px >= d.x && px <= d.x d.w && py >= d.y && py < = d.y d.h) {
         true를 반환합니다.                              } 다른 {
          false 반환;                              }  
}

/**객체 속성 가져오기
* @param obj 객체
* @param 속성 속성
​*/
function getDefaultStyle(obj, attribute) {
Return parsInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getCompulatedStyle(obj, false)[attribute])
}


예는 다음과 같습니다.

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

 
 
 <머리> 
  데모  
  <스타일 유형="텍스트/css"> 
  본문{마진:0px;} 
    .main{위치:상대적;} 
    #f1{위치:절대; 배경:#FF0000; 상단:100px; 왼쪽:100px; 너비:200px; 높이:200px; z-색인:999} 
    #f2{위치:절대; 배경:#FFFF00; 상단:0px; 왼쪽:0px; 너비:600px; 높이:150px;} 
   
  
 <본문> 
 

 
   

 
   

 
 

 
 <스크립트 유형="텍스트/자바스크립트"> 
    var o = document.getElementById("f1"); 
    var d = document.getElementById("f2"); 
    경고(영향(o, d)); 

    기능 영향(obj, dobj) { 
        var o = { 
            x: getDefaultStyle(obj, '왼쪽'), 
            y: getDefaultStyle(obj, 'top'), 
            w: getDefaultStyle(obj, '너비'), 
            h: getDefaultStyle(obj, '높이')
        } 

        var d = { 
            x: getDefaultStyle(dobj, '왼쪽'), 
            y: getDefaultStyle(dobj, 'top'), 
            w: getDefaultStyle(dobj, '너비'), 
            h: getDefaultStyle(dobj, '높이') 
        } 

        var px, py; 

        px = o.x <= d.x ? d.x : o.x; 
        py = o.y <= d.y ? d.y : o.y; 
 
        // 判断点是否都在两个对象中 
        if (px >= o.x && px <= o.x o.w && py >= o.y && py <= o.y o.h && px >= d.x && px <= d.x d.w && py >= d.y && py < = d.y d.h) { 
            사실을 반환; 
        } else { 
            거짓을 반환; 
        } 
    } 

    함수 getDefaultStyle(obj, attribute) { 
        return parsInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getCompulatedStyle(obj, false)[attribute]); 
    } 
  
  

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.