เทคโนโลยีใหม่สำหรับการเปลี่ยนรูปภาพ: วิธีโดเมนของรัฐ

นักพัฒนาที่คุ้นเคยกับ CSS จะต้องรู้ถึงเทคโนโลยีการเปลี่ยนรูปภาพและความสำคัญของมัน Dave Shea ได้สรุปรายละเอียดเกี่ยวกับเรื่องนี้ไว้ในบทความของเขา ดู บทสรุปที่ยอดเยี่ยมของ Dave Shea กำลัง วิเคราะห์ วิธีการที่มีอยู่ทั้งหมด บทความนี้จะแนะนำหลักการของวิธีนี้โดยละเอียด:

ข้อเสียของวิธีการที่มีอยู่:

1. ล้มเหลวได้ง่าย เช่น รูปภาพถูกปิดใช้งานหรือรูปภาพแทนที่มีพื้นที่โปร่งใส
2. ซับซ้อนเกินกว่าจะดำเนินการได้อย่างรวดเร็วและเชื่อถือได้
3. เมื่อข้ามแผนผังเอกสารผ่าน js การกะพริบที่เกิดขึ้นเมื่อโหลดเพจไม่เป็นที่น่าพอใจ
4. อาจเข้ากันไม่ได้กับเบราว์เซอร์บางตัว

วิธีการเปลี่ยนรูปภาพใหม่:

เทคโนโลยีการเปลี่ยนรูปภาพใหม่จำเป็นต้องดำเนินการด้วยความช่วยเหลือของ js แต่ง่ายต่อการนำไปใช้ คุณเพียงแค่แนะนำ js ชิ้นเล็ก ๆ เข้าไปในหัวเท่านั้น เมื่อดำเนินการ js แล้ว ".image-on" จะถูกผนวกเข้ากับกฎการตอบสนอง ตราบใดที่รูปภาพของลูกค้าไม่ได้ปิดใช้งาน กฎจะมีผลใช้งานต่อไปนี้

กฎข้อแรกจะมีผลเสมอ กฎข้อที่สองจะมีผลเฉพาะเมื่อรูปภาพไม่ได้ปิดใช้งานเท่านั้น "text-indent" ทำให้ข้อความชดเชยนอกหน้าจอ "overflow:hidden" ส่วนใหญ่จะใช้เพื่อวางจุดยึดไว้ใต้ FF เพื่อให้โฟกัสถูกชดเชยนอกหน้าจอเมื่อมีการคลิก

กฎข้อที่สองรวมอยู่ในหน้าจอ @media และส่วนใหญ่จะใช้เพื่อให้แน่ใจว่าการเปลี่ยนรูปภาพจะเกิดขึ้นในโปรแกรมอ่านหน้าจอเท่านั้น และไม่อยู่ในสถานะการพิมพ์ หากยังไม่เสร็จสิ้น เมื่อพิมพ์หน้า ผู้ใช้ส่วนใหญ่จะเห็นช่องว่างขนาดใหญ่แทนที่จะเป็นข้อความที่มีความหมาย

เทคโนโลยีนี้ดำเนินการได้รวดเร็ว เนื่องจากข้อความถูกชดเชยจากหน้าจอ รูปภาพจึงสามารถมีองค์ประกอบที่โปร่งใส ดังนั้นคุณจึงไม่สามารถมองเห็นข้อความใดๆ ผ่านรูปภาพได้ การดำเนินการ Js นั้นรวดเร็วมาก เกือบจะทันที และใช้ประโยชน์จากคุณลักษณะของเบราว์เซอร์ได้อย่างเต็มที่

การวิเคราะห์วิธี

"วิธีการฟิลด์สถานะ" เป็นวิธีการที่ทำให้กฎ CSS มีผลอย่างรวดเร็วในสถานะสมมติ โดยมีพื้นหลังบริบทเป็นเอกสาร จึงหลีกเลี่ยงไม่ให้เบราว์เซอร์ข้ามโครงสร้าง DOM มีเหตุผลสองประการในการใช้ "แนวทางโดเมนของรัฐ":

1. เพื่อตอบสนองต่อปฏิกิริยาของผู้ใช้ เนื้อหาบางส่วนบนเพจจึงได้รับการจัดรูปแบบใหม่
2. เพิ่มสไตล์เพิ่มเติมตามเบราว์เซอร์ไคลเอ็นต์ อุปกรณ์ และเงื่อนไขอื่นๆ

"วิธีการเขตข้อมูลรัฐ" ผนวกคลาสกับ html โดยใช้สคริปต์ต่อไปนี้

document.enableStateScope = function(scope, on)
{
var de = document.documentElement;
if (on)
de.className += " " + scope;
else
de.className = de.className.replace(
new RegExp(" \b " + scope + " \b "), "");
};

มีปัญหาเล็กน้อยกับ js นี้ ฟังก์ชั่นการสลับไม่มีผลในหน้าตัวอย่าง ฉันแก้ไขอีกครั้งรหัสเป็นดังนี้:

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
On ? addClass(de,scope) : removeClass(de,scope);
};

วิธีการ hasClass, addClass และ RemoveClass ข้างต้นยืมวิธีการมาจาก "เทคนิค Pro JavaScript" หากคุณใช้ jquery วิธีการก็จะง่ายกว่า

"ช่องสถานะ" สามารถเปลี่ยนได้ด้วยวิธีต่อไปนี้:

if (condition == true) {
document.enableStateScope("myScope", true);
}

หาก "ช่องสถานะ" เป็น "เปิด" ชื่อของช่องสถานะจะถูกผนวกเข้ากับตัวเลือกของกฎ กฎต่อไปนี้จะเปลี่ยนสีของจุดยึดเป็นสีน้ำเงินเมื่อเงื่อนไขเป็นจริง

a { color: red; }
.myScope a { color: blue; }

ตามที่คุณอาจคาดหวัง เทคนิคการเปลี่ยนรูปภาพในโดเมนรัฐจะทำงานโดยการตรวจสอบเพื่อดูว่ารูปภาพถูกปิดใช้งานหรือไม่ หากไม่ได้ปิดใช้งาน ช่องสถานะ "เปิดรูปภาพ" จะถูกเปิดใช้งานซึ่งตรงไปตรงมา

h1 {
ความกว้าง: 100px;
ความสูง: 50px;
-

หน้าจอ @media {
.images บน h1 {
เยื้องข้อความ: -10,000px;
ภาพพื้นหลัง: url (image.png);
ล้น: ซ่อนเร้น;
-
-