JS meniru efek switching kulit baidu: (ganti div, pilih gambar yang Anda inginkan, sebagai latar belakang halaman web, simpan)
Penting: Cookie Simpan Status
Kode HTML:
<body> <v id = "header"> <div id = "header_con"> <vet> <a href = "javascript :;" OnClick = "showImgbox ()"> Ganti kulit </a> </div> </div> </div> <div id = "DIMGBOX"> <DIV ID = "DIMGTITLE"> <DIV ID = "IMGTITLE_CON"> <v id = "title1"> <a href = "javascript:;"> Popular = "> <a"> <"div =" div = "JAVASCRIPT:;"> POPULER </a "> href = "javascript :;" OnClick = "cideimgbox ()"> tutup </a> </div> </div> </div> <div id = "imlist"> <v> <img src = "image/bg0.jpg"/> </div> <viMg src = "gambar/bg1.jpg"/div> </div> <mg src = "gambar/bg1.jpg"/div> </div> "Img =" Image/Bg1.jpg "//Div> /> </div> <vet> <img src = "gambar/bg3.jpg"/> </div> <v> <img src = "gambar/bg4.jpg"/>> div> </div> </div> </div> </div> </div> div> </div> </div> </div> </div> </Div> Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div>
Kode CSS:
* {margin: 0px; padding: 0px;}#header {height: 40px; Lebar: 100%; latar belakang:#000000;} a {text-decoration: none;}. dbg {float: left;}#dimgbox {width: 100%; Tinggi: 140px; /*posisi: absolute;*/ latar belakang: #ffffff; Atas: 0px; Kiri: 0px; Tampilan: Tidak Ada;}#Dimgtitle {Height: 40px; Lebar: 100%; Border-Bottom: solid 1px #ccc;} #imgtitle_con {width: 1180px; Tinggi: 40px; margin: 0px auto; line-height: 40px;}#title1 {float: left;}#title1 a {display: block; Latar Belakang:#04A6F9; Tinggi: 40px; Warna: #FFFFFF; Text-Align: center;}#title2 {float: right;}#imlist {height: 65px; Lebar: 1180px; margin: 0px auto;}. imgitem {float: left; margin-top: 10px; margin-left: 5px;}. imgitem img {width: 100px;}Kode JS:
function showImgbox () {$ ("#DIMGBox"). Slidedown ();} function cideimgbox () {$ ("#DIMGBOX"). SlideUp ();} $ (function () {// 5. Setelah halaman), tentukan apakah itu ada jika ($ .cookie ("BG-PIC") == " // 6. + .cookie ("bg-pic") + "')); Gunakan sebagai gaya latar belakang halaman web $ ("body"). Css ("latar belakang-gambar", "url ('+src+"') "); // 4. Simpan status $ .cookie (" bg-pic ", src, {kedaluwarsa: 1});});});Gambar reproduksi:
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.
Penulis: Wangwangwangmax