Эффект: (Skin It Out Div, выберите нужную картинку, как веб -фон, сохранить)
ВАЖНО: Статус сохранения cookie
HTML -код:
<body> <div id = "Header"> <div id = "header_con"> <viv> <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 ()"> close </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/bg1.jpg"/> </div> <div> <img src = "image/bg1.jpg"/> </div> <div> <img src = " /></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> </div> </div> </div>
CSS -код:
* {маржа: 0px; Padding: 0px;}#Header {height: 40px; Ширина: 100%; фон:#000000;} a {text-decoration: none;}. dbg {float: left;}#dimgbox {width: 100%; Высота: 140px; /*Положение: абсолют;*/ founale: #ffffff; Верх: 0px; слева: 0px; дисплей: none;}#dimgtitle {height: 40px; Ширина: 100%; Border-Bottom: 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: right;}#imglist {height: 65px; Ширина: 1180px; Маржа: 0px Auto;}. Imgitem {float: Left; маржинальная версия: 10px; Margin-Lefft: 5px;}. Imgitem img {width: 100px;}JS -код:
Функция showimgbox () {$ ("#dimgbox"). sliddown ();} function hideimgbox () {$ ("#dimgbox"). slideup ();} $ (function () {// 5. После открытия страницы, определить, существует ли она, если ($ .cookie ("bg-pic") == " // 6, если это не существует, установите первую картину в качестве фона по умолчанию $ («Тело»). + $ .cookie ("bg-pic") + "')"); Используйте его в качестве фонового стиля веб-страницы $ ("body"). Css ("founal-image", "url ('+src+"') "); // 4. Сохранить статус $ .cookie (" bg-pic ", src, {истекает: 1});});});Изображение воспроизведения:
Приведенный выше простой пример кода для имитации функции замены кожи Baidu - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.