تصف هذه المقالة طريقة تنفيذ الطبقة المنبثقة Div بواسطة JS. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
بالمناسبة ، من السهل حقًا تنفيذ طبقات منبثقة عند إصدار العديد من المكونات الإضافية. ومع ذلك ، أعتقد أحيانًا أن هذه المكونات الإضافية ليست عملية وغالبًا ما تجد بعض الأشياء الأصلية JS النقية. اسمحوا لي أن أشارككم مثيل طبقة منبثقة JS Div الأصلية. يمكن للأصدقاء المحتاجين إلقاء نظرة.
وغني عن القول ، فقط نشر الكود. هناك رموز وتعليقات:
انسخ الرمز كما يلي:/*
* منبثقة طبقة DIV
*/
وظيفة showdiv ()
{
var idiv = document.getElementById ("idiv") ؛
var mou_head = document.getElementById ('mou_head') ؛
idiv.style.display = "block" ؛
// يجب أن تتمحور الأجزاء التالية لعرض الطبقة المنبثقة
idiv.style.left = (document.documentElement.clientwidth-idiv.clientwidth)/2+document.documentElement.scrollleft+ "px" ؛
idiv.style.top = (document.documentElement.clientheight-Idiv.Clientheight)/2+document.documentElement.scrolltop-50+ "px" ؛
// الأجزاء التالية تجعل الصفحة بأكملها رمادي فوق نقرة
var procbg = document.createElement ("div") ؛ // إنشاء Div أولاً
procbg.setattribute ("id" ، "mybg") ؛ // تحديد معرف Div
procbg.style.background = "#000000" ؛
procbg.style.width = "100 ٪" ؛
procbg.style.height = "100 ٪" ؛
procbg.style.position = "ثابت" ؛
procbg.style.top = "0" ؛
procbg.style.left = "0" ؛
procbg.style.zindex = "500" ؛
procbg.style.opacity = "0.6" ؛
procbg.style.filter = "alpha (عتامة = 70)" ؛
// أضف طبقة الخلفية إلى الصفحة
document.body.appendchild (procbg) ؛
document.body.style.overflow = "Hidden" ؛ // إلغاء شريط التمرير
// الأجزاء التالية تدرك تأثير السحب للطبقة المنبثقة
var posx ؛
var posy
mou_head.onmousedown = دالة (هـ)
{
if (! e) e = window.event ؛ //أي
posx = e.clientx - parseint (idiv.style.left) ؛
posy = e.clienty - parseint (idiv.style.top) ؛
document.onmousemove = mousemove ؛
}
document.onmouseup = function ()
{
document.onmousemove = null ؛
}
وظيفة mousemove (EV)
{
إذا (ev == null) ev = window.event ؛ // ie
idiv.style.left = (ev.clientx - posx) + "px" ؛
idiv.style.top = (ev.clienty - posy) + "px" ؛
}
}
وظيفة مغلقة () // أغلق الطبقة المنبثقة
{
var idiv = document.getElementById ("idiv") ؛
idiv.style.display = "none" ؛
document.body.style.overflow = "auto" ؛ // استعادة صفحة التمرير
var body = document.getElementSbyTagname ("body") ؛
var mybg = document.getElementById ("mybg") ؛
الجسم [0] .RemoveChild (MyBG) ؛
}
<!-طبقة البوب تبدأ->
<div id = "idiv" style = "display: none ؛ الموضع: absolute ؛ z-index: 1000 ؛ الخلفية:#67a3d9 ؛">
<div id = "mou_head" 100px ؛ الارتفاع = 10px ؛ z-index: 1001 ؛ الموضع: المطلق ؛ "> هذا يستخدم لتنفيذ طبقات السحب </div>
<type type = "button" value = "close" onClick = "quiveriv () ؛" />
</div>
<!-نهاية>
أما بالنسبة لبعض تأثيرات التجميل ، يمكنك تعديلها بنفسك.
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.