ใช้เค้าโครงเว็บแบบเรียบง่ายซึ่งประกอบด้วยกล่องที่แตกต่างกันห้ากล่อง แต่ละกล่องมีภาพพื้นหลังที่แตกต่างกันและมีระยะห่างระหว่างกล่องเหล่านั้น เมื่อคุณวางเมาส์เหนือกล่อง ภาพพื้นหลังจะจางลงและข้อความจะเปลี่ยนเป็นสีขาว กล่องและปุ่มต่างๆ จะอยู่ในคอนเทนเนอร์ และทั้งหน้าจะดูเหมือนแกลเลอรี
<div class="คอนเทนเนอร์">
<div id="สไลด์">
<div class="item" style="พื้นหลัง-รูปภาพ:url('./img/จาง รัวหนาน01.jpg')"></div>
<div class="item" style="พื้นหลัง-รูปภาพ:url('./img/Ju Jingyi01.jpg')"></div>
<div class="item" style="พื้นหลัง-รูปภาพ:url('./img/Ju Jingyi02.jpg')"></div>
<div class="item" style="พื้นหลัง-รูปภาพ:url('./img/Ju Jingyi06.jpg')"></div>
<div class="item" style="พื้นหลัง-รูปภาพ:url('./img/Ju Jingyi04.jpg')"></div>
<div class="item" style="พื้นหลัง-รูปภาพ:url('./img/Ju Jingyi07.jpg')"></div>
</div>
<ระดับ div = "ปุ่ม">
<div class="ซ้าย">
< ก่อนหน้า</div>
<div class="center">ดาวน์โหลดวอลเปเปอร์</div>
<div class="right">ถัดไป ></div>
</div>
</div>
</div> -
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
ขนาดกล่อง: เส้นขอบกล่อง;
-
.คอนเทนเนอร์ {
ความกว้าง: 100vw;
ความสูง: 100vh;
ตำแหน่ง: ญาติ;
ล้น: ซ่อนเร้น;
-
.รายการ {
ความกว้าง: 240px;
ความสูง: 160px;
ตำแหน่ง: แน่นอน;
ด้านบน: 50%;
ซ้าย: 0;
แปลงร่าง: แปล Y(-50%);
รัศมีเส้นขอบ: 10px;
กล่องเงา: 0 30px 50px #505050;
ขนาดพื้นหลัง: ปก;
ตำแหน่งพื้นหลัง: กึ่งกลาง;
การเปลี่ยนแปลง: 1 วินาที;
-
.item:n-ลูก(1)
.item: n-เด็ก (2) {
ซ้าย: 0;
ด้านบน: 0;
ความกว้าง: 100%;
ความสูง: 100%;
แปลงร่าง: แปล Y (0);
กล่องเงา: ไม่มี;
รัศมีเส้นขอบ: 0;
-
.item: n-ลูก (3) {
ซ้าย: 70%;
-
.item: n-ลูก (4) {
ซ้าย: คำนวณ (70% + 250px);
-
.item: n-ลูก (5) {
ซ้าย: คำนวณ (70% + 500px);
-
.item:เด็กคนที่ n(n+6) {
ซ้าย: คำนวณ (70% + 750px);
ความทึบ: 0;
-
.ปุ่ม {
ความกว้าง: 100%;
ตำแหน่ง: แน่นอน;
ด้านล่าง: 50px;
ขอบซ้าย: -50px;
การจัดแนวข้อความ: กึ่งกลาง;
จอแสดงผล: ดิ้น;
ปรับเนื้อหา: กึ่งกลาง;
-
.buttons div {
ความกว้าง: 120px;
ความสูง: 50px;
ความสูงของบรรทัด: 50px;
การจัดแนวข้อความ: กึ่งกลาง;
รัศมีเส้นขอบ: 5px;
ระยะขอบ: 0 25px;
การเปลี่ยนแปลง: .5 วินาที;
เคอร์เซอร์: ตัวชี้;
ผู้ใช้เลือก: ไม่มี;
ขนาดตัวอักษร: 20px;
สี: #fff;
สีพื้นหลัง: rgba (0, 0, 0, 0.4);
กล่องเงา: 2px 2px 2px rgba (0, 0, 0, 0.2);
- const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
สไลด์ const = document.querySelector("#slide")
ให้ openClick = true // การประมวลผลคันเร่ง (เพื่อให้แน่ใจว่ากระบวนการดำเนินการภาพเคลื่อนไหว ปุ่มจะไม่ถูกคลิกซ้ำ ๆ กัน)
leftBtn.addEventListener("คลิก", () => {
ถ้า (openClick) {
openClick = false // หลังจากกระตุ้นการคลิกแล้ว ให้ปิดการใช้งานปุ่ม const items = document.querySelectorAll(".item")
slide.prepend (รายการ [items.length - 1])
setTimeout(() => openClick = true, 1,000) // 1 วินาทีเพื่อเปิดปุ่มอีกครั้ง}
-
rightBtn.addEventListener("คลิก", () => {
ถ้า (openClick) {
openClick = เท็จ
รายการ const = document.querySelectorAll(".item")
slide.appendChild(รายการ[0])
setTimeout(() => openClick = จริง, 1,000)
-
-- ระยะขอบ: 0; ช่องว่างภายใน: 0; ขนาดกล่อง: เส้นขอบกล่อง; -
รหัสนี้กำหนดสไตล์ CSS สากล รวมถึงการตั้งค่ารูปแบบกล่องขององค์ประกอบเป็น border-box นั่นคือความกว้างและความสูงของรูปแบบกล่องจะรวมเส้นขอบและช่องว่างภายในขององค์ประกอบ แทนที่จะเป็นเพียงเนื้อหาขององค์ประกอบ
.คอนเทนเนอร์ {
ความกว้าง: 100vw;
ความสูง: 100vh;
ตำแหน่ง: ญาติ;
ล้น: ซ่อนเร้น;
-โค้ดนี้กำหนดสไตล์ CSS ของคอนเทนเนอร์ รวมถึงการตั้งค่าความกว้างและความสูงของคอนเทนเนอร์เป็น 100vw และ 100vh ซึ่งเป็นความกว้างและความสูงของวิวพอร์ต ในเวลาเดียวกัน ให้ตั้งค่าการวางตำแหน่งของคอนเทนเนอร์เป็นการวางตำแหน่งที่สัมพันธ์กัน นั่นคือ การวางตำแหน่งที่สัมพันธ์กับองค์ประกอบหลัก สุดท้าย ให้ตั้งค่าคุณสมบัติโอเวอร์โฟลว์ของคอนเทนเนอร์เป็นซ่อน นั่นคือองค์ประกอบที่เกินขอบเขตของคอนเทนเนอร์จะไม่ถูกแสดง
.รายการ {
ความกว้าง: 240px;
ความสูง: 160px;
ตำแหน่ง: แน่นอน;
ด้านบน: 50%;
ซ้าย: 0;
แปลงร่าง: แปล Y(-50%);
รัศมีเส้นขอบ: 10px;
กล่องเงา: 0 30px 50px #505050;
ขนาดพื้นหลัง: ปก;
ตำแหน่งพื้นหลัง: กึ่งกลาง;
การเปลี่ยนแปลง: 1 วินาที;
-รหัสนี้กำหนดสไตล์ CSS ของกล่อง รวมถึงการตั้งค่าความกว้างและความสูงของกล่องเป็น 240px และ 160px ซึ่งเป็นขนาดของกล่อง ในเวลาเดียวกัน ให้ตั้งค่าตำแหน่งของกล่องเป็นตำแหน่งที่แน่นอน นั่นคือ การวางตำแหน่งที่สัมพันธ์กับองค์ประกอบหลัก สุดท้าย ตั้งค่ารัศมีเส้นขอบของกล่องเป็น 10px ซึ่งเป็นมุมโค้งมนของกล่อง ขนาดภาพพื้นหลังของกล่องคือหน้าปก ซึ่งครอบคลุมทั้งกล่อง ภาพพื้นหลังอยู่ตรงกลาง สุดท้าย ให้ตั้งค่าเอฟเฟกต์การเปลี่ยนแปลงของกล่องเป็น 1 วินาที นั่นคือ เวลาเอฟเฟกต์การเปลี่ยนแปลงคือ 1 วินาที
.item:n-ลูก(1)
.item: n-เด็ก (2) {
ซ้าย: 0;
ด้านบน: 0;
ความกว้าง: 100%;
ความสูง: 100%;
แปลงร่าง: แปล Y (0);
กล่องเงา: ไม่มี;
รัศมีเส้นขอบ: 0;
-โค้ดนี้กำหนดสไตล์ CSS สำหรับกล่องแรกและกล่องที่สอง รวมถึงการตั้งค่าตำแหน่งเป็น 0 ซึ่งหมายความว่าสไตล์เหล่านี้จะครอบคลุมด้านบนของคอนเทนเนอร์ นอกจากนี้ ให้ตั้งค่าความสูงเป็น 100% ซึ่งหมายความว่าครอบคลุมความสูงทั้งหมดของคอนเทนเนอร์ สุดท้าย ให้ตั้งค่าคุณสมบัติการแปลงเป็น TranslateY(0) ซึ่งหมายความว่าจะไม่เลื่อนลง นอกจากนี้ ให้ตั้งค่าเงาและรัศมีเส้นขอบเป็น 0 กล่าวคือ ไม่มีเงาและเส้นขอบ
.item: n-ลูก (3) {
ซ้าย: 70%;
-โค้ดนี้กำหนดสไตล์ CSS ของช่องที่สาม รวมถึงกำหนดตำแหน่งเป็น 70% จากด้านซ้ายของคอนเทนเนอร์
.item: n-ลูก (4) {
ซ้าย: คำนวณ (70% + 250px);
-โค้ดนี้กำหนดสไตล์ CSS ของช่องที่สี่ รวมถึงตั้งค่าตำแหน่งเป็น 250px จากด้านขวาของช่องที่สาม
.item: n-ลูก (5) {
ซ้าย: คำนวณ (70% + 500px);
-โค้ดนี้กำหนดสไตล์ CSS ของช่องที่ห้า รวมถึงตั้งค่าตำแหน่งเป็น 500px จากทางด้านขวาของช่องที่สาม
.item:เด็กคนที่ n(n+6) {
ซ้าย: คำนวณ (70% + 750px);
ความทึบ: 0;
-โค้ดนี้กำหนดสไตล์ CSS ให้กับกล่องทั้งหมด รวมถึงกำหนดตำแหน่งเป็น 750px จากด้านขวาของกล่องที่สาม นอกจากนี้ให้ตั้งค่าความทึบเป็น 0 เช่น มองไม่เห็น
.ปุ่ม {
ความกว้าง: 100%;
ตำแหน่ง: แน่นอน;
ด้านล่าง: 50px;
ขอบซ้าย: -50px;
การจัดแนวข้อความ: กึ่งกลาง;
จอแสดงผล: ดิ้น;
ปรับเนื้อหา: กึ่งกลาง;
-รหัสนี้คือการตั้งค่าสไตล์ CSS ของปุ่ม รวมถึงการตั้งค่าความกว้างของปุ่มเป็น 100% นั่นคือขนาดของปุ่มจะเหมือนกับคอนเทนเนอร์ ในเวลาเดียวกัน ให้ตั้งค่าตำแหน่งของปุ่มเป็น 50px จากด้านล่างของคอนเทนเนอร์ สุดท้าย ให้ตั้งค่าการจัดตำแหน่งของปุ่มเป็นการจัดกึ่งกลาง ซึ่งหมายความว่าปุ่มจะอยู่ตรงกลางในแนวนอน
.buttons div {
ความกว้าง: 120px;
ความสูง: 50px;
ความสูงของบรรทัด: 50px;
การจัดแนวข้อความ: กึ่งกลาง;
รัศมีเส้นขอบ: 5px;
ระยะขอบ: 0 25px;
การเปลี่ยนแปลง: .5s;
เคอร์เซอร์: ตัวชี้;
ผู้ใช้เลือก: ไม่มี;
ขนาดตัวอักษร: 20px;
สี: #fff;
สีพื้นหลัง: rgba (0, 0, 0, 0.4);
กล่องเงา: 2px 2px 2px rgba (0, 0, 0, 0.2);
-รหัสนี้คือการตั้งค่าสไตล์ CSS ของปุ่ม รวมถึงการตั้งค่าความกว้างของปุ่มเป็น 120px และความสูงเป็น 50px ซึ่งเป็นขนาดของปุ่ม ในเวลาเดียวกัน ให้ตั้งค่าความสูงของแถวของปุ่มเป็น 50px ซึ่งก็คือความสูงของปุ่ม การจัดตำแหน่งข้อความของปุ่มจะอยู่ตรงกลาง นั่นคือ ข้อความจะอยู่ตรงกลางในแนวนอน รัศมีเส้นขอบของปุ่มคือ 5px ซึ่งเป็นมุมโค้งมนของปุ่ม ระยะขอบของปุ่มคือ 0 25px นั่นคือระยะห่างระหว่างด้านซ้ายและด้านขวาของปุ่มในแนวนอนคือ 25px เอฟเฟกต์การเปลี่ยนแปลงของปุ่มคือ 0.5 วินาที นั่นคือ เวลาในการเอฟเฟกต์การเปลี่ยนแปลงคือ 0.5 วินาที คุณลักษณะเคอร์เซอร์ของปุ่มคือตัวชี้ นั่นคือเมื่อเมาส์วางเหนือปุ่ม รูปร่างของเมาส์จะเปลี่ยนเป็นรูปมือ คุณลักษณะการเลือกผู้ใช้ของปุ่มคือไม่มี กล่าวคือ ผู้ใช้ไม่สามารถเลือกข้อความในปุ่มได้ ขนาดตัวอักษรของปุ่มคือ 20px ซึ่งเป็นขนาดตัวอักษรของปุ่ม สีข้อความของปุ่มจะเป็นสีขาว ซึ่งเป็นสีข้อความของปุ่ม สีพื้นหลังของปุ่มคือ rgba(0, 0, 0, 0.4) นั่นคือสีพื้นหลังของปุ่มเป็นสีดำและความโปร่งใสคือ 0.4 คุณสมบัติเงาของปุ่มคือ 2px 2px 2px rgba(0, 0, 0, 0.2) นั่นคือ เงาของปุ่มคือ 2px 2px 2px สีดำ และความโปร่งใสคือ 0.2
นี่เป็นการสรุปบทความนี้เกี่ยวกับโค้ดตัวอย่างของภาพหมุนพาโนรามา HTML+CSS สำหรับเนื้อหาภาพหมุนแบบพาโนรามา HTML CSS ที่เกี่ยวข้องเพิ่มเติม โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องต่อไปนี้ต่อไป ฉันหวังว่าคุณทุกคน โปรดสนับสนุน downcodes.com มากขึ้นในอนาคต!