1. الشكل الفرعي
عند تصميم موقع ويب ، نحتاج إلى تصميم بعض النماذج الفرعية المشروطة ، مثل
هذه الخطوة سهلة التنفيذ ، فقط Div+CSS على ما يرام ، يرجى الاطلاع على الرمز:
نسخة الكود كما يلي:
<viv> </viv>
<viv>
<viv>
<center> يمكن أن يؤدي النقر فوق منطقة الكتلة إلى تغيير موقفي </center>
</div>
</div>
نسخة الكود كما يلي:
.modal-background
{
لون الخلفية: #999999 ؛
أسفل: 0 ؛
اليسار: 0 ؛
العتامة: 0.3 ؛
الموقف: ثابت ؛
اليمين: 0 ؛
أعلى: 0 ؛
Z-Index: 1100 ؛
}
. الريف
{
خلفية اللون: #fffff ؛
الحدود: 1 بكسل الصلبة #6B94AD ؛
box-shadow: 5px 5px 5px #6b94ad ؛
Font-Family: 'Microsoft Yahei' ؛
حجم الخط: 12 بكسل ؛
الارتفاع: 120 بكسل ؛
اليسار: 50 ٪ ؛
الهامش اليساري: -160px ؛
الهامش: -160px ؛
العتامة: 1 ؛
الموقف: ثابت ؛
أعلى: 50 ٪ ؛
العرض: 320 بكسل ؛
Z-index: 1110 ؛
}
. وردة الريف
{
الارتفاع: 25 بكسل ؛
اللون: #ffff ؛
خط الرصيف: 600 ؛
-صورة الخلفية: -Moz-Liner-Radient (Top ، #4a8cc5 ، #2963a5) ؛
-صورة الخلفية: -webkit-regient (خطي ، الجزء العلوي الأيسر ، أسفل اليسار ، توقف اللون (0 ، #4A8CC5) ، توقف اللون (1 ، #2963A5)) ؛
Filter: progid: dimizageTransform.microsoft.gradient (startColorstr = '#4a8cc5' ، endcolorstr = '#2963a5' ، gradientType = '0') ؛ ::::::::::::::::::::::::: ::::::::::::::::: ::::::::
}
.modal-window .head center
{
حشو أعلى: 2 بكسل ؛
}
يمكن لإضافة HTML و CSS أعلاه تحقيق تأثير النموذج الوسيط أعلاه. حيث اليسار: القمة: 50 ٪ ؛
بطبيعة الحال ، يتم كتابة حجم النموذج المشروط في الفئة النمطية.
نسخة الكود كما يلي:
<viv> </viv>
<viv>
<viv>
<center> يمكن أن يؤدي النقر فوق منطقة الكتلة إلى تغيير موقفي </center>
</div>
</div>
يتم إلحاق السطر الثاني من التعليمات البرمجية بفئة نمط القائمة-Window لتجاوز الحجم والموضع في فئة Window .Modal ، ولكنه يضمن أيضًا أن يكون النموذج الوسيط يتركز وعرضه.
نسخة الكود كما يلي:
.list-window
{
العرض: 600 بكسل ؛
الارتفاع: 400 بكسل ؛
الهامش اليساري: -300px ؛
الهامش: -200px ؛
}
كما هو موضح
يمكن ملاحظة أن تنفيذ هذه الخطوة بسيط للغاية.
2. عندما ينقر الماوس على رأس الشكل الفرعي ، كيفية سحب ونقل الشكل الفرعي؟ بعد تقديم JQ ، نحتاج فقط إلى بعض البرامج النصية لحل هذه الوظيفة الصغيرة. إذا كنت لا تصدق ذلك ، فلنرى
نسخة الكود كما يلي:
var اليسار ، أعلى ، $ هذا ؛
$ (document) .Delegate ('. modal-window .head' ، 'mousedown' ، function (e)
left =
this.setCapture؟
this.setCapture () ،
this.onmousemove = function (ev) {mousemove (ev || event) ؛
this.onmouseup = mouseup
): $ (document) .bind ("mousemove" ، mousemove) .bind ("mouseup" ، mouseup) ؛
}) ؛
وظيفة mousemove (e) {
var target = $ this.parents ('. modal-window') ؛
var l = math.max ((e.clientx -الرقم الأيسر + (target.css ('margin -left'). استبدال (/px $/، '')) || 0) ، -arget.position (). غادر)؛
var t = math.max ((e.clienty -top + number (target.css ('margin -top'). استبدال (/px $/، '')) || 0) ، -arget.position (). قمة)؛
l = math.min (l ، $ (window) .width () - target.width () - target.position (). left) ؛
t = math.min (t ، $ (window) .hight () - target.height () - target.position (). top) ؛
اليسار = e.clientx ؛
أعلى = e.clienty ؛
Target.css ({'margin-left': l ، 'margin-top': t}) ؛
}
وظيفة mouseup (e) {
var el = $ this.css ('Cursor' ، 'Default'). get (0) ؛
el.releasecapture؟
((
el.releasecapture () ،
el.onmousemove = el.onmouseup = null
): $ (document) .Unbind ("mousemove" ، mousemove) .Unbind ("mouseup" ، mouseup) ؛
}
هذا الرمز قصير جدًا ويمكنه تشغيله بسلاسة في المتصفحات المختلفة.
في الواقع ، مبدأ التنفيذ بسيط للغاية ويقسم تقريبًا إلى ثلاث خطوات:
① عندما يكون الماوس تحت موسى على رأس النموذج المشروط ، قم بربط أحداث Mousemove و Mouseup فورًا بالوثيقة.
② عندما لا يظهر الماوس (بدون فأرة) ، إذا كان الماوس يتحرك في النموذج ، فعليك تنشيط وظيفة mousemove ونقل موضع النموذج بأكمله في الوقت المناسب عن طريق حساب المسافة التي يتحركها الماوس.
③ عندما يتم ارتداد الماوس (Mouseup) ، اتصل بحدث Mouseup لإلغاء إثارة حدث Mousemove وحدث Mouseup المرتبط بالوثيقة.
مبدأ العملية بأكملها هو: عندما يتم تنظيف الماوس Mousedown ، يتم نقل حدث حركة الماوس إلى المستند ، ويتم معالجة النموذج بأكمله من خلال حدث حركة الماوس على المستند.
بالإضافة إلى ذلك ، هناك خدعة صغيرة في Mousemove ، وهي اليسار العالمي. إلى أي مدى انتقل الماوس.
بعد تحليل هذا الرمز ، وجد أن الماوس يحرك النموذج أو أي عنصر في المستند أمر سهل للغاية.
على سبيل المثال ، إذا كنت ترغب في تغيير حجم النموذج عن طريق السحب والإسقاط ، فنحن بحاجة فقط إلى ضبط حجم النموذج في وظيفة معالجة أحداث MouseMove وسيكون لديك على ما يرام. تحسن مرة أخرى؟
قد يسأل بعض الناس ما الذي يفعله setCapture و ReleasEcapture على التوالي؟ في الواقع ، هذا هو توافق IE فقط. يتيح SetCapture للعنصر الحالي التقاط جميع أحداث الماوس.