JS เลียนแบบเอฟเฟกต์การสลับผิวหนัง Baidu: (แทนที่ div, เลือกรูปภาพที่คุณต้องการเป็นพื้นหลังหน้าเว็บ, บันทึก)
สำคัญ: สถานะการบันทึกคุกกี้
รหัส HTML:
<body> <div id = "header"> <div id = "header_con"> <div> <a href = "JavaScript:;" onclick = "showimgbox ()"> สกินแทนที่ </a> </div> </div> </div> <div id = "dimgbox"> <div id = "dimgtitle"> <div id = "imgtitle_con"> <div id = "title1"> <a href = "javascript:; href = "JavaScript:;" onclick = "hideimgbox ()"> ปิด </a> </div> </div> </div> <div id = "imglist"> <div> <img src = "image/bg0.jpg"/> </div> <div> <img src = "image/bg1.jpg"/> /> </div> <div> <img src = "image/bg3.jpg"/> </div> <div> <img src = "image/bg4.jpg"/> </div> </div> </div> </div>
รหัส CSS:
* {มาร์จิ้น: 0px; Padding: 0px;}#ส่วนหัว {ความสูง: 40px; ความกว้าง: 100%; พื้นหลัง:#000000;} a {การกำหนดข้อความ: ไม่มี;}. dbg {float: left;}#dimgbox {width: 100%; ความสูง: 140px; /*ตำแหน่ง: สัมบูรณ์;*/ พื้นหลัง: #FFFFFF; ด้านบน: 0px; ซ้าย: 0px; แสดง: ไม่มี;}#dimgtitle {ความสูง: 40px; ความกว้าง: 100%; ขอบด้านล่าง: Solid 1px #ccc;} #imgtitle_con {width: 1180px; ความสูง: 40px; มาร์จิ้น: 0px auto; Line-Height: 40px;}#title1 {float: left;}#title1 a {display: block; ความเป็นมา:#04A6F9; ความสูง: 40px; สี: #ffffff; TEXT-ALIGN: CENTER;}#title2 {float: ขวา;}#imglist {ความสูง: 65px; ความกว้าง: 1180px; มาร์จิ้น: 0px auto;}. imgitem {float: ซ้าย; ระยะขอบด้านบน: 10px; ขอบซ้าย: 5px;}. imgitem img {width: 100px;}รหัส JS:
ฟังก์ชั่น showimgbox () {$ ("#dimgbox") slidedown ();} ฟังก์ชั่น hideimgbox () {$ ("#dimgbox") slideup ();} $ (ฟังก์ชัน () {// 5 หลังจากเปิดหน้าหรือไม่ // 6 $ .COOKIE ("BG-PIC") + "')"); มันเป็นรูปแบบพื้นหลังของหน้าเว็บ $ ("ร่างกาย"). css ("พื้นหลัง-ภาพ", "url ('+src+"') "); // 4. บันทึกสถานะ $ .cookie (" bg-pic ", src, {หมดอายุ: 1});});});ภาพการทำซ้ำ:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น
ผู้แต่ง: Wangwangwangmax