سأكتب اليوم مثالاً صغيرًا باستخدام js وcss لكتابة مربع عائم يمكن إخفاؤه تلقائيًا. يتم استخدام CSS بالتأكيد للتحكم في الأنماط، ويتم استخدام Js للتحكم في العرض والإخفاء. عادةً ما يتم تنفيذ العرض والإخفاء بطريقتين: 1. استخدم js للتحكم في سمات العرض الخاصة به. 2. استخدم js للتحكم في حجمه.
ما سنتحدث عنه اليوم هو تحقيق عرض وإخفاء العناصر من خلال التحكم في حجمها. المبدأ هو: تسجيل حدث حركة الماوس للداخل والخارج عندما يتحرك الماوس خارج نطاق الكائن، اضبط عرضه على 1. عندما يتحرك الماوس داخل الكائن مرة أخرى، اضبط عرضه على 1. تمت استعادة العرض. انها بسيطة جدا، دعونا نلقي نظرة!
الحالة المخفية:
الخط الضيق على اليسار هو الإطار العائم بعد إخفائه.
حالة العرض:
عندما ينزلق الماوس فوق المربع العائم الموجود على اليسار، سيتم عرض المربع العائم مرة أخرى.
نمط CSS:
انسخ رمز الكود كما يلي:
<نمط>
* { حجم الخط: 12 بكسل؛
html، body { الهامش: 0 بكسل؛
.ب { الهامش: 0 بكسل؛
.line0 { ارتفاع الخط: 20 بكسل؛ لون الخلفية: أصفر فاتح؛
.line1 { ارتفاع الخط: 18 بكسل؛ لون الخلفية: أزرق فاتح؛
.w { الموضع: مطلق؛ الارتفاع: 10 بكسل؛ العرض: 1 بكسل؛ التجاوز: مخفي؛ الحدود: 2 بكسل المؤشر: افتراضي؛
.t { ارتفاع الخط: 20 بكسل؛ العرض: 160 بكسل؛ لون الخلفية: #27C؛ مركز؛ }
.winBody { الارتفاع: 270 بكسل؛ العرض: 160 بكسل؛ overflow-y:auto؛
</نمط>
رمز شبيبة:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة ماي شو () {
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //حاجز
وظيفة إخفاء () {
//document.getElementById('mydiv').style.display = "block";
document.getElementById('mydiv').style.width="1px";
}
// للاختبار، قم بإنشاء بعض المحتوى بشكل عشوائي لتسهيل تأثيرات الاختبار.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"</div>");
وظيفة جديدة (ث، ب، ج، د، س) {
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
<span style="white-space:pre"> </span>}
</script>
كود HTML:
انسخ رمز الكود كما يلي:
<الجسم>
<div id = "mydiv" onmousemove = "myshow ()" onmouseout = "myhide ()">
<div>معلومات الطالب</div>
<ديف>
الرقم التعريفي للطالب: <label>0123456789 </label><br><br>
الاسم: <label>شياو مينغ</label><br><br>
الكلية: <label>كلية البرمجيات</label><br><br>
التخصص: <label>هندسة البرمجيات</label><br><br>
الفئة: <label>الفئة 1</label><br><br>
</div>
</div>
</الجسم>
استخدم مربعًا عائمًا لعرض بعض المعلومات، عندما تحتاج إلى رؤيتها، أشر إليها وستخرج، وهو أمر مريح للغاية، عندما تقوم بتحريك الماوس بعيدًا عندما لا تكون هناك حاجة إليه، فسوف يغادر بصمت من تلقاء نفسه . على الرغم من أنه بسيط للغاية، إلا أنه يتمتع بتجربة مستخدم جيدة، فإن صنع الأشياء التي تجعل المستخدمين مرتاحين هو سعينا المستمر.