تصف هذه المقالة طريقة ظهور تأثير قناع شفاف على شاشة اللون الرمادي على الشاشة من قِبل JS+CSS. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
هناك مثل هذه الآثار على العديد من المواقع الإلكترونية. بعد إجراء عملية معينة ، سوف يطفو قناع شفاف باللونين الرمادي. يمكن تشغيل المحتوى المحدد عليه ، مثل مربع تسجيل الدخول والمحتويات الأخرى. دعونا نقدم كيفية تحقيق هذا التأثير. مثال الكود كما يلي:
انسخ الرمز كما يلي: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "uptor" content = "// www.vevb.com/"/>
<title> كيفية ظهور تأثير قناع شفاف رمادي اللون الرمادي-Wulin.com </title>
<type type = "text/css">
*
{
الهامش: 0px ؛
الحشو: 0px ؛
}
.zhezhao
{
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
خلفية اللون:#000 ؛
مرشح: ألفا (عتامة = 50) ؛
-الموز سعة: 0.5 ؛
العتامة: 0.5 ؛
الموقف: مطلق ؛
اليسار: 0px ؛
أعلى: 0px ؛
العرض: لا شيء ؛
Z-Index: 1000 ؛
}
.تسجيل الدخول
{
العرض: 280 بكسل ؛
الارتفاع: 180 بكسل ؛
الموقف: مطلق ؛
أعلى: 200 بكسل ؛
اليسار: 50 ٪ ؛
خلفية اللون:#000 ؛
الهامش اليساري: -140 بكسل ؛
العرض: لا شيء ؛
Z-Index: 1500 ؛
}
.محتوى
{
الهامش: 50 بكسل ؛
اللون: أحمر.
ارتفاع الخط: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
محاذاة النص: المركز ؛
}
</style>
<script type = "text/javaScript">
window.onload = function ()
{
var Zhezhao = document.getElementById ("Zhezhao") ؛
var login = document.getElementById ("login") ؛
var bt = document.getElementById ("bt") ؛
var btclose = document.getElementById ("btclose") ؛
bt.onclick = function ()
{
zhezhao.style.display = "block" ؛
login.style.display = "block" ؛
}
btclose.onclick = function ()
{
Zhezhao.style.display = "none" ؛
login.style.display = "none" ؛
}
}
</script>
</head>
<body>
<div id = "Zhezhao"> </viv>
<div id = "login"> <button id = "btclose"> انقر للإغلاق </button> </viv>
<div> wulin.com يرحب بك ، <button id = "bt"> انقر فوق القناع المنبثق </button> </viv>
</body>
</html>
ما سبق ينفذ وظيفة القناع الأساسية. عند النقر على الظهور بالقمامة ، سيظهر الكائن. عند النقر للإغلاق ، سيختفي تأثير القناع. إليك كيفية تحقيق التأثير:
مبدأ التنفيذ:
قم بإنشاء Div على شاشة كاملة ، باستخدام تحديد المواقع المطلقة ، بحيث يمكن فصله عن دفق المستندات ، دون التأثير على العناصر الأخرى ، وتعيينه على حالة شفافة. بالطبع ، يمكن تعديل هذه الشفافية حسب الرغبة ، وإنشاء عنصر تسجيل دخول ، والذي يستخدم أيضًا تحديد المواقع المطلقة ويجعل قيمة سمة Z-Index أكبر من DIV على الشاشة ، وفي هذا الوقت لن تتم تغطيتها بواسطة DIV على الشاشة كاملة. في الحالة الافتراضية ، فإن قيمة سمة العرض لهاتين divs هي لا شيء. عند النقر فوق الزر المقابل ، يمكنهم تغيير قيمة سمة العرض الخاصة بهم.
الاقتراح: الكود المكتوب بخط اليد قدر الإمكان يمكن أن يحسن بشكل فعال كفاءة التعلم والعمق.
آمل أن تكون هذه المقالة مفيدة لبرمجة الويب للجميع.