JS imitez l'effet de commutation cutanée Baidu: (Remplacez une div, sélectionnez l'image que vous souhaitez, comme arrière-plan de la page Web, enregistrer)
IMPORTANT: Statut de sauvegarde des cookies
Code html:
<body> <div id = "header"> <div id = "header_con"> <div> <a href = "javascript:;" onclick = "showImgbox ()"> Remplacement de la peau </a> </div> </div> </div> <div id = "dimgbox"> <div id = "dimgtitle"> <div id = "imgtitle_con"> <div id = "title1"> <a href = "javascript :;"> populaire </a> </v> <a div id = "Title2"> <A href = "javascript:;" onclick = "hideimgbox ()"> clôture </a> </ div> </ div> </ div> <div id = "imglist"> <div> <img src = "image / bg0.jpg" /> </ div> <v> <img src = "image / bg1.jpg" /> </ div> <v> <img src = "image / bg2.jpg" /> </ div> <div> <img src = "image / bg3.jpg" /> </ div> <div> <img src = "image / bg4.jpg" /> </ div> </ div> </ div> </div> </div> </ div> </ div> </ div> </div> </div> </div>
Code CSS:
* {margin: 0px; rembourrage: 0px;} # en-tête {hauteur: 40px; Largeur: 100%; Contexte: # 000000;} a {text-decoration: aucun;}. dbg {float: gauche;} # dimgbox {width: 100%; hauteur: 140px; / * Position: Absolute; * / Background: #FFFFFF; En haut: 0px; gauche: 0px; Affichage: aucun;} # dimgTitle {hauteur: 40px; Largeur: 100%; Border-Bottom: solide 1px #ccc;} # imgtitle_con {width: 1180px; hauteur: 40px; marge: 0px automatique; line-height: 40px;} # title1 {float: Left;} # title1 a {display: block; Contexte: # 04A6F9; hauteur: 40px; Couleur: #ffffff; Text-Align: Center;} # title2 {float: right;} # imglist {height: 65px; Largeur: 1180px; marge: 0px auto;}. imgitem {float: gauche; marge: 10px; marge-gauche: 5px;}. IMGITEM IMG {largeur: 100px;}Code js:
fonction showImgbox () {$ ("# dimgbox"). Slidedown ();} fonction hideImgBox () {$ ("# dimgbox"). Slideup ();} $ (function () {// 5. Une fois la page ouverte, déterminez si elle existe if ($ .cookie ("bg-pic") == "" ||. // 6. $ .cookie ("bg-pic") + "')"); Il est le style d'arrière-plan de la page Web $ ("Body"). CSS ("Background-Image", "url ('+ src +"') "); // 4. Enregistrer le statut $ .cookie (" bg-pic ", src, {expire: 1});});});Image de reproduction:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.
Auteur: Wangwangwangmax