تتمحور الطبقة المنبثقة لـ Js دائمًا حول أفكار التنفيذ والتعليمات البرمجية

الكاتب：Eve Cole وقت التحديث：2025-03-03 01:32:01

يتم دائمًا توسيط النافذة المنبثقة

انسخ رمز الكود كما يلي:

<نوع البرنامج النصي = "نص/جافا سكريبت">

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=function(){

إذا (إيسي) {

window.onscroll=doIE;

window.onresize=doIE }

وظيفة دوي () {

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var width=document.documentElement.clientWidth;

var height=document.documentElement.clientHeight;

var oDiv=document.getElementById("oneReply");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';

بادئ ذي بدء، يحتاج الجميع إلى فهم موضع نمط CSS غير المتوافق: Fixed؛

تحتوي سمة الموضع على أربع قيم اختيارية: ثابتة، ومطلقة، وثابتة، ونسيبية.

دعونا نتعلم استخداماتها المختلفة معًا أثناء الدراسة، يجب أن نفكر في أي منها يجب استخدامه تحت أي موقف تخطيطي.

الموضع: ثابت لا يوجد تحديد موضع قيمة السمة هذه هي الموضع الافتراضي لجميع العناصر في الظروف العادية، لا نحتاج إلى الإعلان عنها على وجه التحديد، ولكن في بعض الأحيان عند مواجهة الميراث، لا نريد أن نرى تأثير السمات الموروثة بواسطة العنصر. نفسه، حتى تتمكن من استخدام الموضع: ثابت لإلغاء الميراث، أي استعادة القيمة الافتراضية لتحديد موضع العنصر. على سبيل المثال: #nav { الموضع: ثابت } المذكوران سابقًا، نتحدث بشكل أساسي عن الموضع الثابت: ثابت. ماذا تعني قيمة سمة الموضع بالنسبة للموضع الثابت للنافذة؟ يتم وضع العنصر بشكل مشابه للوضع المطلق، ولكن الكتلة التي تحتوي عليه هي إطار العرض نفسه. في وسائط الشاشة مثل متصفحات الويب، لا تتحرك العناصر في عرض المستعرض أثناء تمرير المستند. على سبيل المثال، يسمح بتخطيط نمط الإطار. في وسائط الصفحة مثل المطبوعات، يظهر عنصر ثابت في نفس الموضع في الصفحة الأولى. يمكن استخدام هذا لإنشاء عناوين أو حواشي سفلية متدفقة. لقد رأينا تأثيرات مشابهة، لكن معظمها لا يتم تحقيقه من خلال CSS، ولكن باستخدام نصوص JS. يرجى ملاحظة أن IE6 لا يدعم...

نستخدم هنا الموضع: ثابت + "تقنية الاختراق" + "جافا سكريبت"؛

انسخ رمز الكود كما يلي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/1999/xhtml/TR/xhtml/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">

<الرأس>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>مهندس الواجهة الأمامية Tusheng</title>

<نوع النمط = "نص/css">

الجسم، شعبة {الهامش: 0؛}

#a{width:200px;height:200px;background:blue;position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;_position:absolute;}

<//نمط>

<نوع البرنامج النصي = "نص/جافا سكريبت">

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=function(){

إذا (إيسي) {

window.onscroll=doIE;

window.onresize=doIE }

وظيفة دوي () {

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var width=document.documentElement.clientWidth;

var height=document.documentElement.clientHeight;

var oDiv=document.getElementById("a");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';< /script>

</الرأس>

<الجسم>

<br/

</الجسم>

</أتش تي أم أل>