مبدأ استخدام المنبثقة Div لعرض المحتوى ديناميكيًا: أولاً ، استخدم CSS و HTML لإخفاء المحتوى في المنبثقة المنبثقة ، ثم استخدام JavaScript (jQuery في هذا البرنامج التعليمي) لعرضها ديناميكيًا. هذا التأثير لا يستفيد تمامًا من مساحة التخطيط المحدودة ، ولكن أيضًا يحسن تجربة المستخدم ؛ والأهم من ذلك ، أنه لا يؤثر على تأثير كبار المسئولين الاقتصاديين (لأنه موجود بالفعل في الصفحة ، ولكنه غير مرئي في البداية)
1. تحديد DIV في صفحة HTML وتنفيذ ما نحتاج إلى عرضه في DIV.
نسخة الكود كما يلي:
<body>
<div id = "login">
<h2> <img src = "Images/close.png"/> تسجيل الدخول إلى موقع الويب </h2>
<form id = "logInform">
<viv> </viv>
<viv> الحساب: <input type = "text" name = "user" /> </viv>
<div> كلمة المرور: <input type = "password" name = "pass" /> </viv>
<div> <input type = "button" name = "sub" value = "" /> </viv>
</form>
<div> سجل مستخدم جديد | نسيت كلمة السر؟ </div>
</div>
</body>
صورة واحدة تساوي ألف كلمة. دعونا نلقي نظرة على لقطة شاشة لتأثير هذه النافذة المنبثقة Div:
2. نمط CSS الذي أستخدمه
نسخة الكود كما يلي:
#تسجيل الدخول {
العرض: 350 بكسل ؛
الارتفاع: 250 بكسل ؛
الحدود: 1px الصلبة #CCC ؛
الموقف: مطلق ؛
العرض: كتلة ؛
Z-index: 9999 ؛
الخلفية: #fff ؛
}
#login H2 {
الارتفاع: 40 بكسل ؛
رفع الخط: 40 بكسل ؛
محاذاة النص: المركز ؛
حجم الخط: 14px ؛
تباعد الرسائل: 1 بكسل ؛
اللون:#666 ؛
الخلفية: url (الصور/login_header.png) تكرار x ؛
الهامش: 0 ؛
الحشو: 0 ؛
Border-Bottom: 1PX Solid #CCC ؛
المؤشر: تحرك.
}
#login H2 IMG {
تعويم: صحيح.
الموقف: قريب
أعلى: 14px ؛
اليمين: 8px ؛
المؤشر: مؤشر.
}
#login div.info {
الحشو: 10px 0 5px 0 ؛
محاذاة النص: المركز ؛
اللون: مارون.
}
#login div.user ، #login div.pass {
حجم الخط: 14px ؛
اللون:#666 ؛
الحشو: 5px 0 ؛
محاذاة النص: المركز ؛
}
#login input.text {
العرض: 200 بكسل ؛
الارتفاع: 25 بكسل ؛
الحدود: 1px الصلبة #CCC ؛
الخلفية: #fff ؛
حجم الخط: 14px ؛
}
#login. لكن {
محاذاة النص: المركز ؛
الحشو: 15px 0 ؛
}
#login input.submit {
العرض: 107px ؛
الارتفاع: 30 بكسل ؛
الخلفية: url (الصور/login_button.png) بدون تكرار ؛
الحدود: لا شيء ؛
المؤشر: مؤشر.
}
#login. آخر {
محاذاة النص: صحيح ؛
الحشو: 15px 10px ؛
اللون:#666 ؛
}
الشيء الرئيسي الذي يجب ملاحظته هنا هو تعريف نمط DIV ، لأننا نحتاج إلى مركز العرض ، نستخدم موضع تحديد المواقع المطلق: مطلق ؛ ثانياً ، نظرًا لأنها طبقة منبثقة ، يجب أن تكون DIV في المحيط الخارجي ، وبالتالي فإن المؤشر Z عادة ما يتم ضبطه على كبير جدًا ، هنا قمنا بتعيينه على z-index: 9999 ؛ نقطة أخرى هي أن DIV نفسها مخفية ويجب ضبطها على عرضها: لا شيء ، ولكن هنا نحتاج إلى النظر مباشرة إلى التأثير ، حتى نتمكن من عرضه مباشرة باستخدام العرض: Block ؛
3. نحتاج إلى السماح له بعرضه في المركز ، لذلك يجب أن نحصل أولاً على ارتفاع وعرض المتصفح. إذا كان هناك إزاحة أفقية أو عمودية لشريط التمرير ، فنحن بحاجة أيضًا إلى الحصول على الطول والحصول على موضع DIV إلى المتصفح من خلال الحساب.
نسخة الكود كما يلي:
$ (وثيقة). ready (function ()
{
jquery.fn.extend ({
المركز: وظيفة (العرض ، الارتفاع)
{
إرجاع $ (هذا) .css ("اليسار" ، ($ (window) .width ()-العرض)/2+$ (window) .scrollleft ()).
CSS ("TOP" ، ($ (window) .Height ()-الارتفاع)/2+$ (نافذة) .ScrollTop ()).
CSS ("العرض" ، العرض).
CSS ("الارتفاع" ، الارتفاع) ؛
}
}) ؛
}) ؛
دعها تظهر بالنقر فوق الزر
نسخة الكود كما يلي:
$ (". تسجيل الدخول"). انقر فوق (وظيفة ()
{
$ ("#login"). show (). Center (350،250) ؛ // إظهار مربع تسجيل الدخول
}) ؛
رسم تخطيطي للتكاثر
4. يمكن سحب وإسقاط الإطار المنبثق
تنفيذ الكود
نسخة الكود كما يلي:
$ (وثيقة). ready (function ()
{
jquery.fn.extend ({
// وظيفة السحب والإفلات
السحب: وظيفة () {
var $ tar = $ (this) ؛
إرجاع $ (هذا). mousedown (وظيفة (e) {
if (e.target.tagname == "H2") {
var diffx = e.clientx - $ tar.offset (). اليسار ؛
var diffy = e.clienty - $ tar.offset (). top ؛
$ (document) .mousemove (وظيفة (e) {
var left = e.clientx - diffx ؛
var top = e.clienty - diffy ؛
إذا (ترك <0) {
اليسار = 0 ؛
}
آخر إذا (اليسار <= $ (نافذة) .Scrollleft ()) {
اليسار = $ (نافذة) .scrollleft () ؛
}
وإلا إذا (left> $ (window) .width () +$ (window) .scrollleft () - $ tar.width ()) {
اليسار = $ (window) .width () +$ (window) .Scrollleft () -$ tar.width () ؛
}
إذا (أعلى <0) {
أعلى = 0 ؛
}
آخر إذا (أعلى <= $ (نافذة) .ScrollTop ()) {
أعلى = $ (نافذة) .scrolltop () ؛
}
آخر إذا (أعلى> $ (نافذة). Height () +$ (Window) .ScrollTop () - $ tar.height ()) {
TOP = $ (window) .height () +$ (window) .ScrollTop () - $ tar.height () ؛
}
$ tar.css ("Left" ، left + 'px'). css ("top" ، top + 'px') ؛
}) ؛
}
$ (document) .mouseup (function () {
$ (this) .Unbind ("mousemove") ؛
$ (هذا). Unbind ("Mouseup")
}) ؛
}) ؛
}
}) ؛
}) ؛
هنا ننقر فقط ونسحب عناصر H2 في محتوى DIV. إذا كانت هناك حاجة إلى DIV العالمية ، فيمكن تعديلها. مبدأ السحب: عندما يضغط الماوس على العنصر المحدد ، احصل على إحداثيات نقطة الماوس ، ومن خلال الحساب ، يتم نقل الصورة أيضًا إلى الموضع المقابل. بمجرد أن ينقر الماوس على الإلغاء ، سيتم إلغاء حدث الصحافة المقابلة ولا تزال الصفحة.
استدعاء طريقة السحب
نسخة الكود كما يلي:
$ ("#login"). drag () ؛
الآن يمكننا النقر فوق شريط عنوان المربع المنبثق وسحبه في المتصفح في الإرادة.