Collision_javascript 기술을 결정하는 JS 방법-JS 튜토리얼-php.cn

Collision_javascript 기술을 결정하는 JS 방법

WBOY

풀어 주다： 2016-05-16 16:14:25

원래의

1185명이 탐색했습니다.

이 글의 예시에서는 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]);
    }