ดำเนินการต่อด้วยการใช้งาน JavaScript อย่างง่าย ๆ ของหน้าต่างการลากแบบป๊อปอัพ (I) เพื่อการเรียนรู้
ต่อไปนี้คือการวิเคราะห์เฉพาะของรหัส:
ก่อนอื่นมายืนยันโครงสร้าง:
หน้าต่างลอยน้ำ: มองไม่เห็นในขั้นต้น รวมแถบชื่อเรื่องและแถบเนื้อหาพร้อมแถบชื่อเรื่องและปุ่มปิดภายในแถบชื่อเรื่อง
Mask Layer: มองไม่เห็นที่จุดเริ่มต้น ใช้เพื่อตั้งค่าพื้นหลังโปร่งแสงเมื่อหน้าต่างลอยปรากฏขึ้น
ปุ่ม: ใช้เพื่อคลิกเพื่อปรากฏขึ้นที่หน้าต่างลอยตัว
ต่อไปนี้จะอธิบายรายละเอียด
1. เพื่อให้หน้าต่างเคลื่อนที่ได้อย่างอิสระตำแหน่งของหน้าต่างควรจะแน่นอน
/*ส่วนประกอบเลเยอร์ลอยตัวล็อกอิน*/. ป๊อปอัพ {จอแสดงผล: ไม่มี; /*การซ่อนเริ่มต้น*/ ความกว้าง: 380px; ความสูง: อัตโนมัติ; /*อิสระสูงเพราะไม่แน่นอนเนื้อหาเท่าไหร่ */ Border: 1px Solid #D5D5D5; ความเป็นมา: #FFFF; /*เนื้อหาของหน้าต่างเป็นทึบแสงพื้นหลังเป็นสีขาว*/ box-shadow: 0 0 3px rgba (0, 0, 0, 0, 0.25); -moz-box-shadow: 0 0 3px rgba (0, 0, 0, 0.25); -webkit-Box-Shadow: 0 0 3PX RGBA (0, 0, 0, 0.25); /*หน้าต่างเนื้อหามีเงา*/ พรมแดน-ราดอุดิ: 8px; /* ทุกมุมใช้มุมโค้งมนที่มีรัศมี 8px คุณสมบัตินี้เป็นคุณสมบัติมาตรฐาน CSS3*/ -moz-border-Radius: 8px; /* แอตทริบิวต์ส่วนตัวของเบราว์เซอร์ Mozilla*/ -webkit-Border-Radius: 8px; /* แอตทริบิวต์ส่วนตัวของเบราว์เซอร์ WebKit*//* มุมหน้าต่างโค้งมน*/ ตำแหน่ง: สัมบูรณ์; ด้านบน: 100px; ซ้าย: 100px; /*การวางตำแหน่งสัมบูรณ์*/ z-index: 9000; -2. เพิ่มแถบชื่อเรื่องไปที่หน้าต่างและตั้งเคอร์เซอร์เมาส์ของแถบชื่อเรื่องเป็นรูปร่าง (ย้าย) (เมื่อลากในโครเมี่ยมเคอร์เซอร์จะกลายเป็นเคอร์เซอร์ข้อความและจะถูกกู้คืนหลังจากปล่อยปุ่มเมาส์) ที่นี่คุณต้องตั้งมุมโค้งมนสำหรับมุมบนซ้ายและขวาบนของแถบชื่อเรื่อง
/*พื้นที่แถบชื่อเรื่อง*/. popup_title {ความสูง: 48px; ความสูงของสาย: 48px; /*กลางในแนวตั้ง*/ การเติม: 0PX 20PX; /*สร้างระยะทางที่แน่นอนจากด้านซ้าย*/ พื้นหลัง: #f5f5f5; /*สีพื้นหลัง*/ เส้นขอบด้านล่าง: 1px Solid #Efefefef; /*ชายแดนด้านล่าง*/ แนวชายแดน: 8px 8px 0 0; /* ใช้มุมโค้งมนที่มีรัศมี 5px ที่มุมบนซ้ายและมุมขวาบน คุณสมบัตินี้เป็นคุณสมบัติมาตรฐาน CSS3*/ -moz-Border-Radius: 8px 8px 0 0; /* คุณสมบัติส่วนตัวของเบราว์เซอร์ Mozilla*/ -webkit-Border-Radius: 8px 8px 0 0; /* คุณสมบัติส่วนตัวของเบราว์เซอร์ WebKit*//* มุมหน้าต่างโค้งมน*/ สี: #535353; ขนาดตัวอักษร: 16px; /* สีตัวอักษรและขนาดตัวอักษร*/ เคอร์เซอร์: ย้าย; /* สไตล์ที่เคลื่อนย้ายได้*/ -moz-user-select: ไม่มี; / * firefox all */ -webkit-user-select: ไม่มี; /* chrome all / safari all / opera15+* / -ms-user-select: ไม่มี; /* ie10*/ -khtml-user-select: ไม่มี; /* เบราว์เซอร์ต้น*/ ผู้ใช้เลือก: ไม่มี; -o-user-select: ไม่มี; /* ไม่รองรับสองแอตทริบิวต์ข้างต้นดังนั้นฉันจึงเขียนที่นี่เพื่อลดความเสี่ยง*/}นี่คือจุดความรู้บางอย่างที่ต้องเข้าใจ:
1. CSS3 (แนวชายแดน) มุมโค้งมนชายแดน
Radius Border เป็นวิธีการย่อ นอกจากนี้ค่าสี่ค่าถูกตั้งค่าตามลำดับของซ้ายบนซ้ายขวาล่างขวาล่างซ้ายล่างและด้านล่างซ้าย สถานการณ์หลักจะเกิดขึ้นในสถานการณ์ต่อไปนี้:
1. หากมีค่าเพียงค่าเดียวดังนั้นค่าสี่ค่าของซ้ายบนซ้ายขวาขวาล่างขวาและด้านล่างซ้ายเท่ากัน
2. มีสองค่าจากนั้นซ้ายบนเท่ากับด้านล่างขวาและค่าแรกจะถูกนำมา; ด้านบนขวาเท่ากับด้านล่างซ้ายและค่าที่สองจะถูกนำมา
3. มีสามค่าค่าแรกคือการตั้งค่าซ้ายบน ในขณะที่ค่าที่สองอยู่บนขวาและล่างซ้ายและพวกเขาจะเท่ากันและค่าที่สามคือการตั้งค่าด้านล่างขวา
4. มีสี่ค่าค่าแรกคือการตั้งค่าซ้ายบนซ้ายและค่าที่สองคือขวาบนขวาค่าที่สามด้านล่างขวาและค่าที่สี่คือการตั้งค่าด้านล่างซ้าย
เบราว์เซอร์ที่รองรับ:
2. เคอร์เซอร์: ย้าย
คุณสมบัติเคอร์เซอร์ระบุประเภทของตัวชี้ (เคอร์เซอร์) ที่แสดง
เมื่อค่าคุณสมบัติเคลื่อนที่ก็หมายความว่าวัตถุที่อ้างถึงโดยเคอร์เซอร์นี้สามารถเคลื่อนย้ายได้มักจะเป็นลูกศรข้ามดังแสดงในรูป
3.user-select: ใช้เพื่อควบคุมการเลือกเนื้อหา
ค่าอัตโนมัติ-ค่าความเพ้อฝันผู้ใช้สามารถเลือกเนื้อหาในองค์ประกอบ
ไม่มี - ผู้ใช้ไม่สามารถเลือกเนื้อหาใด ๆ ในองค์ประกอบ
ข้อความ-ผู้ใช้สามารถเลือกข้อความในองค์ประกอบ
องค์ประกอบ - ข้อความเป็นทางเลือก แต่ภายในขอบเขตขององค์ประกอบ (รองรับโดย IE และ FF เท่านั้น)
ควรสังเกตว่าการเลือกผู้ใช้ไม่ใช่แอตทริบิวต์มาตรฐาน W3C CSS และเบราว์เซอร์รองรับไม่สมบูรณ์และจำเป็นต้องปรับสำหรับแต่ละเบราว์เซอร์
คำอธิบายผู้ใช้เลือก:
ตั้งค่าหรือดึงข้อมูลว่าผู้ใช้ได้รับอนุญาตให้เลือกข้อความ
(1) IE6-9 ไม่รองรับคุณสมบัตินี้ แต่รองรับการใช้แอตทริบิวต์แท็ก onSelectStart = "return false;" เพื่อให้ได้ผลของการเลือกผู้ใช้: ไม่มี; Safari และ Chrome ยังรองรับแอตทริบิวต์แท็กนี้
(2) คุณสมบัตินี้ไม่ได้รับการสนับสนุนจนกว่าโอเปร่า 12.5 แต่เช่นเดียวกับ IE6-9 นอกจากนี้ยังรองรับการใช้แอตทริบิวต์แท็กส่วนตัวที่ไม่สามารถเลือกได้ = "บน" เพื่อให้ได้ผลของการเลือกผู้ใช้: ไม่มี;
(3) ค่าอื่นที่ไม่สามารถเลือกได้ถูกปิด ในเบราว์เซอร์อื่น ๆ หากข้อความถูกตั้งค่าเป็น -ms-user-select: none; ในเบราว์เซอร์อื่นผู้ใช้จะไม่สามารถเริ่มเลือกข้อความในบล็อกข้อความได้
อย่างไรก็ตามหากผู้ใช้เริ่มเลือกข้อความในพื้นที่อื่น ๆ ของหน้าผู้ใช้ยังคงสามารถเลือกข้อความพื้นที่ที่ตั้งค่าข้อความเป็น -ms-user-select: none;
วิเคราะห์รหัสต่อไปนี้ (หมายเหตุ: รหัสนี้และผลการวิเคราะห์ของรหัสนี้มาจาก W3Help):
<! doctype html> <html> <body> <div unselectable = "on" style = "พื้นหลัง: #cc;" > unselectable = on </div> <br/> <div style = "พื้นหลัง: #cc; -webkit-user-select: none;" > -webkit-user-select: none; </div> <br/> <div style = "พื้นหลัง: #cc; -moz-user-select: none;" > -moz-user-select: none; </div> <br/> <div style = "พื้นหลัง: #cc;" onSelectStart = "return false;" > onSelectStart = "return false;" </div> </body> </html>
ผลกระทบในแต่ละเบราว์เซอร์มีดังนี้:
หมายเหตุ 1: เนื้อหาสามารถปิดใช้งานได้
หมายเหตุ 2: ห้ามเลือกเนื้อหาใด ๆ
จะเห็นได้ว่าวิธีการห้ามการเลือกเนื้อหามีดังนี้:
เช่นตั้งค่า unselectable = "on" สำหรับแท็กและตั้งค่าวิธีแท็ก onSelectStart = "return false;"
Firefox ตั้งค่าสไตล์ส่วนตัวสำหรับแท็ก -moz-user-select: ไม่มี
Chrome Safari ตั้งค่าสไตล์ส่วนตัวสำหรับแท็ก -webkit-user-select: ไม่มีและตั้งค่าวิธีแท็ก onSelectStart = "return false;"
Opera set unselectable = "on" สำหรับแท็ก
สารละลาย
ตั้งค่าสไตล์สำหรับป้ายกำกับ -moz-user-select: none; -webkit-user-select: ไม่มีในเวลาเดียวกันตั้งค่า unselectable = "on" เพื่อให้แน่ใจว่าเบราว์เซอร์ทั้งหมดสามารถห้ามการเลือกเนื้อหา
หากคุณตั้งค่าสไตล์การเลือกที่ต้องห้ามเป็นแถบชื่อ
<div id = "popup_title" unselectable = "on"> ล็อกอิน <a href = "javascript: hidepopup ();"> </a> </div>
.popup_title {-moz-user-select: ไม่มี; / * firefox all */ -webkit-user-select: ไม่มี; /* chrome all / safari all / opera15+* / -ms-user-select: ไม่มี; /*ie10*/ -khtml-user-select: ไม่มี; /* เบราว์เซอร์ต้น*/ ผู้ใช้เลือก: ไม่มี; -o-user-select: ไม่มี; /*ไม่รองรับสองแอตทริบิวต์ข้างต้นเขียนที่นี่เพื่อลดความเสี่ยง*/}หมายเหตุ: บทความนี้เป็นต้นฉบับที่อยู่: http://www.cnblogs.com/wanghuih/p/5576910.html
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น