JS를 통해 충돌 방식을 결정하는 방법
- jacklove원래의
- 2018-06-11 16:16:011631검색
JS가 충돌 방법을 결정합니다
/** 判断是否碰撞
* @param obj 原对象
* @param dobj 目标对象
*/
function impact(obj, dobj) {
var o = {
x: getDefaultStyle(obj, 'left'),
y: getDefaultStyle(obj, 'top'),
w: getDefaultStyle(obj, 'width'),
h: getDefaultStyle(obj, 'height')
}
var d = {
x: getDefaultStyle(dobj, 'left'),
y: getDefaultStyle(dobj, 'top'),
w: getDefaultStyle(dobj, 'width'),
h: getDefaultStyle(dobj, 'height')
}
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) {
return true;
} else {
return false;
}
}
/** 获取对象属性
* @param obj 对象
* @param attribute 属性
*/
function getDefaultStyle(obj, attribute) {
return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]);
}
demo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> demo </title>
<style type="text/css">
body{margin:0px;}
.main{position:relative;}
#f1{position:absolute; background:#FF0000; top:100px; left:100px; width:200px; height:200px; z-index:999}
#f2{position:absolute; background:#FFFF00; top:0px; left:0px; width:600px; height:150px;}
</style>
</head>
<body>
<p class="main">
<p id="f1"></p>
<p id="f2"></p>
</p>
<script type="text/javascript">
var o = document.getElementById("f1");
var d = document.getElementById("f2");
alert(impact(o, d));
function impact(obj, dobj) {
var o = {
x: getDefaultStyle(obj, 'left'),
y: getDefaultStyle(obj, 'top'),
w: getDefaultStyle(obj, 'width'),
h: getDefaultStyle(obj, 'height')
}
var d = {
x: getDefaultStyle(dobj, 'left'),
y: getDefaultStyle(dobj, 'top'),
w: getDefaultStyle(dobj, 'width'),
h: getDefaultStyle(dobj, 'height')
}
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) {
return true;
} else {
return false;
}
}
function getDefaultStyle(obj, attribute) {
return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]);
}
</script>
</body>
</html>
이 글에서는 JS를 통해 충돌 방법을 결정하는 방법을 설명합니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.
관련 권장 사항:
CSS를 사용하여 원 효과를 얻는 방법(CSS Sprites)
PHP를 통해 AES256 암호화 알고리즘을 수행하는 방법
PHP를 통해 첨부 파일이 포함된 이메일을 보내는 방법
위 내용은 JS를 통해 충돌 방식을 결정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.