التأثير: عندما يتم إيقاف تشغيل المستخدمين الذين يستخدمون Windows Systems ، تتيح الواجهة التي تظهر فقط للمستخدمين اختيار إيقاف التشغيل أو تسجيل الخروج أو إلغاء الإجراءات ، بينما لا يمكن استخدام البرامج الموجودة على سطح المكتب ، وتكون الشاشة رمادية. يظهر تأثير إيقاف تشغيل Windows في الشكل 22.1.
فوائد استخدام هذا التأثير على صفحات الويب: ما هي فوائد استخدام تأثير الإغلاق هذا على صفحات الويب؟ أولاً ، بعد النقر على رابط ، يتم إخفاء الإجراءات غير المتوفرة للمستخدم في هذا الوقت في الخلفية ، ويتم وضع الإجراءات المتاحة في الجزء العلوي من الشاشة ويتم تسليط الضوء عليها ، والتي يمكن أن تتجنب سوء تعبير المستخدم. ثانياً ، يمكن أن يذكر تسليط الضوء على المعلومات مستخدمي الأشياء التي يجب إيلاء الاهتمام بها.
المبدأ: مبدأ تحقيق هذا التأثير في صفحة الويب أمر بسيط للغاية. قم بإنشاء طبقتين ، واحدة كطبقة تظليل ، تغطي الصفحة بأكملها وعرضها باللون الرمادي ؛ تعمل الطبقة الأخرى كجزء مميز ، فوق طبقة التظليل ، والتي يمكن تعيينها عن طريق ضبط خاصية Z-Index الخاصة بالطبقة. عند إلغاء تأثير الإغلاق ، فقط قم بحذف هذين عنصرين الطبقة في الصفحة.
شفرة:
<html>
<head>
<title> Ajax leftdown effect </title>
<Tyletype = text/css>
#Lightbox {/*هذه الطبقة عبارة عن طبقة مميزة*/
اليمين الحدودي:#ffff1pxsolid ؛
أعلى الحدود:#ffff1pxsolid ؛
العرض: كتلة ؛
z-index: 9999 ؛/*اضبط هذه الطبقة في الجزء العلوي من صفحة الويب ، وقم بتعيينها بشكل كبير بما يكفي*/
الخلفية:#fdfce9 ؛/*تعيين لون الخلفية*/
اليسار: 50 ٪ ؛
الهامش: -220px0px0px-250px ؛
الحدود اليسرى:#ffff1pxsolid ؛
العرض: 500 بكسل ؛
Border-Bottom:#ffff1pxsolid ؛
الموقف: مطلق ؛
أعلى: 50 ٪ ؛
الارتفاع: 400 بكسل ؛
محاذاة النص: اليسار
}
#overlay {/*هذه الطبقة عبارة عن طبقة غلاف*/
العرض: كتلة ؛
z-index: 9998 ؛/*اضبط الجزء السفلي من الطبقة المميزة*/
مرشح: ألفا (عتامة = 20) ؛/*ضبط على شفاف*/
اليسار: 0px ؛
العرض: 100 ٪ ؛
الموقف: مطلق ؛
أعلى: 0px ؛
الارتفاع: 100 ٪
خلفية اللون:#000 ؛
Moz-Opacity: 0.8 ؛
الغضب: .80
}
</style>
</head>
<body>
<ahref = http: //www.baidu.comtarget=_blank> baidu </a>
<!-هذه الطبقة هي طبقة تغطية->
<divid = overlay> </viv>
<!-هذه الطبقة هي طبقة مميزة->
<divid = lightbox> <hhref =#onClick = javaScript: f ()> أغلق </a> & nbsp ؛ <ahref =#onClick = javaScript: f1 ()> open </a> </div>
</body>
</html>
<script>
FunctionF ()
{
document.getElementById (تراكب) .style.display = لا شيء ؛
}
FunctionF1 ()
{
document.getElementById (تراكب) .style.display = block ؛
}
</script>
ملاحظة: إذا كانت هناك علامة <select> في متصفح IE ، فلا يمكن كتابة العلامة بواسطة الطبقة المكتوبة فوقها ، ولكن يمكن الكتابة عليها في متصفحات أخرى. يوضح الشكل 22.3 تأثير علامة <select> في متصفح IE ، ويبين الشكل 22.4 تأثير العلامة <select> في Mozzilafirefox.
الشكل 22.3 <SELECT> علامة في متصفح IE
الشكل 22.4 علامة <select> في متصفح Mozzilafirefox
لذلك عند استخدام متصفح IE ، يجب عليك أولاً إخفاء العنصر <select> في صفحة الويب. على سبيل المثال ، يمكن استخدام الكود التالي لإخفاء جميع عناصر <select> من الصفحة.
Selects = document.getElementsByTagName ('SELECT') ؛
لـ (i = 0 ؛ i <selects.length ؛ i ++) {
يختار [i] .style.vibility = الرؤية ؛
}