تصف هذه المقالة طريقة JS لتحديد التصادم. شاركه للرجوع إليه. التفاصيل كما يلي:
طريقة تصادم JS:
انسخ الرمز على النحو التالي:/** لتحديد ما إذا كان يصطدم
* param obj الكائن الأصلي
* كائن هدف Param Dobj
*/
تأثير الوظيفة (OBJ ، DOBJ) {
var o = {
X: GetDefaultStyle (OBJ ، "اليسار") ،
Y: GetDefaultStyle (OBJ ، "أعلى") ،
W: GetDefaultStyle (OBJ ، "العرض") ،
H: GetDefaultStyle (OBJ ، "الارتفاع")
}
var d = {
X: GetDefaultStyle (Dobj ، 'Left') ،
Y: GetDefaultStyle (Dobj ، "Top") ،
W: GetDefaultStyle (Dobj ، "العرض") ،
H: GetDefaultStyle (Dobj ، "الارتفاع")
}
var px ، py ؛
px = ox <= dx؟ DX: OX ؛
Py = Oy <= dy؟ داي: يا
// تحديد ما إذا كانت النقاط في كلا الكائنين
if (px> = ox && px <= ox + ow && py> = oy && py <= oy + oh && px> = dx && px <= dx + dw && py> = dy && py <= dy + dh) {
العودة صحيح.
} آخر {
العودة كاذبة
}
}
/** احصل على خصائص الكائن
* كائن Param OBJ
* سمة السمة param
*/
وظيفة getDefaultStyle (OBJ ، السمة) {
إرجاع parseint (obj.currentStyle؟ obj.currentStyle [السمة]: document.defaultView.getComputedStyle (obj ، false) [السمة]) ؛
}
الأمثلة على النحو التالي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd html 4.01 Transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title> العرض التوضيحي </title>
<type type = "text/css">
الجسم {الهامش: 0px ؛}
.main {الموضع: النسبي ؛}
#f1 {الموضع: absolute ؛ الخلفية:#ff0000 ؛ أعلى: 100px ؛ اليسار: 100px ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ Z-index: 999}
#f2 {الموضع: absolute ؛ الخلفية:#ffff00 ؛ أعلى: 0px ؛ اليسار: 0px ؛ العرض: 600 بكسل ؛ الارتفاع: 150 بكسل ؛}
</style>
</head>
<body>
<viv>
<div id = "f1"> </viv>
<div id = "f2"> </viv>
</div>
<script type = "text/javaScript">
var o = document.getElementById ("f1") ؛
var d = document.getElementById ("f2") ؛
تنبيه (تأثير (O ، د)) ؛
تأثير الوظيفة (OBJ ، DOBJ) {
var o = {
X: GetDefaultStyle (OBJ ، "اليسار") ،
Y: GetDefaultStyle (OBJ ، "أعلى") ،
W: GetDefaultStyle (OBJ ، "العرض") ،
H: GetDefaultStyle (OBJ ، "الارتفاع")
}
var d = {
X: GetDefaultStyle (Dobj ، 'Left') ،
Y: GetDefaultStyle (Dobj ، "Top") ،
W: GetDefaultStyle (Dobj ، "العرض") ،
H: GetDefaultStyle (Dobj ، "الارتفاع")
}
var px ، py ؛
px = ox <= dx؟ DX: OX ؛
Py = Oy <= dy؟ داي: يا
// تحديد ما إذا كانت النقاط في كلا الكائنين
if (px> = ox && px <= ox + ow && py> = oy && py <= oy + oh && px> = dx && px <= dx + dw && py> = dy && py <= dy + dh) {
العودة صحيح.
} آخر {
العودة كاذبة
}
}
وظيفة getDefaultStyle (OBJ ، السمة) {
إرجاع parseint (obj.currentStyle؟ obj.currentStyle [السمة]: document.defaultView.getComputedStyle (obj ، false) [السمة]) ؛
}
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.