บล็อกเกอร์หลายคนในบล็อก Park มีไอคอนที่มุมล่างขวาของหน้าในบล็อก ไม่ว่าหน้าจอจะยืดออกไปได้อย่างไรมันจะอยู่ที่มุมขวาล่างเสมอ คลิกหน้าไปด้านบน ลองคิดเกี่ยวกับการเขียนตัวอย่างเพื่อให้ได้เอฟเฟกต์นี้ในภายหลัง
1. มุมขวาล่างของไอคอนได้รับการแก้ไข
1. SS มีวิธีการเลย์เอาต์ 4 วิธี คงที่แสดงถึงองค์ประกอบการวางตำแหน่งที่แน่นอน ดังนั้นเราจึงเลือกใช้การแก้ไขเพื่อให้ได้ไอคอนการตรึง
| แน่นอน | สร้างองค์ประกอบที่วางตำแหน่งอย่างแน่นอนการวางตำแหน่งสัมพันธ์กับองค์ประกอบหลักแรกนอกเหนือจากตำแหน่งคงที่ ตำแหน่งขององค์ประกอบถูกระบุโดยแอตทริบิวต์ "ซ้าย", "Top", "ขวา" และ "Bottom" |
| ที่ตายตัว | สร้างองค์ประกอบที่วางตำแหน่งอย่างแน่นอนการวางตำแหน่งสัมพันธ์กับหน้าต่างเบราว์เซอร์ ตำแหน่งขององค์ประกอบถูกระบุโดยแอตทริบิวต์ "ซ้าย", "Top", "ขวา" และ "Bottom" |
| ญาติ | สร้างองค์ประกอบที่อยู่ในตำแหน่งที่ค่อนข้างวางตำแหน่งสัมพันธ์กับตำแหน่งปกติ ดังนั้น "ซ้าย: 20" เพิ่ม 20 พิกเซลไปยังตำแหน่งซ้ายขององค์ประกอบ |
| คงที่ | ค่าเริ่มต้น ไม่มีการวางตำแหน่งองค์ประกอบจะปรากฏในสตรีมปกติ (ไม่สนใจการประกาศด้านบน, ล่างซ้าย, ขวา, ขวาหรือ z-index) |
| สืบทอด | ระบุว่าค่าของแอตทริบิวต์ตำแหน่งควรได้รับการสืบทอดจากองค์ประกอบหลัก |
2. รหัสมีดังนี้ ปุ่มปุ่มจะถูกวางไว้ที่มุมขวาล่างของหน้าจอเสมอ ไม่ว่าจะเป็นการลากแถบความแม่นยำบนและล่างหรือยืดขนาดหน้าต่างเบราว์เซอร์
การคัดลอกรหัสมีดังนี้:
#MYTOPBTN {
ด้านล่าง: 5px;
ขวา: 5px;
ตำแหน่ง: แก้ไข;
-
2 หลังจากคลิกให้กลับไปที่มุมบนสุดของหน้า
1. ในการกลับไปที่มุมบนของหน้าจอคุณต้องเข้าใจวิธีใช้ JavaScript เพื่อใช้งานการเคลื่อนไหวขึ้นและลงของแถบลาก JavaScript ให้วิธีการเลื่อนและสกรอลล์
การคัดลอกรหัสมีดังนี้:
window.scrollby (0, -30) // เลื่อน 30 พิกเซลขึ้นไปบนหน้าจอ
window.scroll (0,0) // หน้าจอกลับไปที่มุมบนสุด
2. วิธีการดังกล่าวข้างต้นจะย้ายแถบลากดังนั้นวิธีการย้ายไปที่ด้านบนของหน้าด้วยความเร็วที่แน่นอน จากนั้นคุณต้องใช้วิธี SetInterval และ ClearInterval สิ่งนี้จะช่วยให้สามารถเลื่อน 30 พิกเซลขึ้นบนหน้าจอในเวลาน้อยกว่า 10 มิลลิวินาที
การคัดลอกรหัสมีดังนี้:
<body>
<div id = "mydiv">
</div>
<button id = "mytopbtn" onclick = "topfunc ()"> ไปด้านบน </button>
</body>
การคัดลอกรหัสมีดังนี้:
var myvar;
ฟังก์ชั่น topfunc () {
myVAR = setInterval (Obscrollby, 10);
-
ฟังก์ชั่นแต่ละตัวคลัง (แต่ละคน) {
if (document.documentelement.scrolltop <= 0) {
ClearInterval (MyVar);
}อื่น{
window.scrollby (0, -30);
-
-
iii. ขยาย
มีการใช้ปุ่มด้านบน ดังนั้นเราจะใช้ปุ่มคลิกที่หน้าจอด้านล่างได้อย่างไร ในความเป็นจริงหลักการมีความคล้ายคลึงกันดังนั้นเราจะไม่เขียนตัวอย่างที่นี่ ให้คุณลักษณะบางอย่างสำหรับการอ้างอิง
การคัดลอกรหัสมีดังนี้:
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientwidth
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientheight
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetWidth (รวมถึงความกว้างของเส้นขอบ)
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetheight (รวมถึงความกว้างของเส้นขอบ)
ความกว้างข้อความแบบเต็มของหน้าเว็บ: document.body.scrollwidth
ข้อความเต็มของหน้าเว็บ: document.body.scrollheight
หน้าเว็บจะเปิดตัวในระดับสูง: document.body.scrolltop
ด้านซ้ายของหน้าเว็บที่กำลังเปิดตัว: document.body.scrollleft
ในส่วนหลักของหน้าเว็บ: window.screentop
ด้านซ้ายของข้อความหลักของหน้าเว็บ: window.screenleft
ความละเอียดหน้าจอสูง: window.screen.height
ความกว้างของความละเอียดหน้าจอ: window.screen.width
หน้าจอความสูงของพื้นที่ทำงาน: window.screen.availheight
หน้าจอความกว้างของพื้นที่ทำงาน: window.screen.availwidth
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ารองเท้าเด็กที่ชอบเล่นบล็อกชอบ