JS는 바이두 스킨 스위칭 효과를 모방합니다 : (DIV 교체, 웹 페이지 배경으로 원하는 사진을 선택하십시오)
중요 : 쿠키 저장 상태
HTML 코드 :
<body> <div id = "header"> <div id = "header_con"> <div> <a href = "javaScript :;" onclick = "showimgbox ()"> 스킨 교체 </a> </a> </a> </a> </div> </div> </div> <div id = "dimgbox"> <div id = "dimgTitle"> <div id = "imgtitle_con"> <div id = "title1"> <a href = "javascript :;"</div </div id = "id ="> div id = "> div id ="</a> href = "JavaScript :;" onclick = "hideimgbox ()"> close </a> </a> </a> </div> </div> </div> <div id = "imglist"> <div> <img src = "image/bg0.jpg"/> </div> <div> <img src = "image/bg1.jpg"/> <img src = "image/bg2.jp" /> </div> <div> <img src = "image/bg3.jpg"/> </div> <div> <img src = "im
CSS 코드 :
* {마진 : 0px; 패딩 : 0px;}#헤더 {높이 : 40px; 너비 : 100%; 배경 :#000000;} a {text-decoration : none;}. dbg {float : left;}#dimgbox {너비 : 100%; 높이 : 140px; /*위치 : 절대;*/ 배경 : #ffffff; 상단 : 0px; 왼쪽 : 0px; 디스플레이 : 없음;}#DimgTitle {높이 : 40px; 너비 : 100%; Border-Bottom : solid 1px #ccc;} #imgtitle_con {너비 : 1180px; 높이 : 40px; 마진 : 0px 자동; Line-Height : 40px;}#title1 {float : left;}#title1 a {display : block; 배경 :#04A6F9; 높이 : 40px; 색상 : #ffffff; Text-Align : Center;}#title2 {float : right;}#imglist {높이 : 65px; 너비 : 1180px; 마진 : 0px auto;}. imgitem {float : 왼쪽; 마진-탑 : 10px; 마진-왼쪽 : 5px;}. imgitem img {너비 : 100px;}JS 코드 :
function showimgbox () {$ ( "#dimgbox"). slidedown ();} 함수 hideimgbox () {$ ( "#dimgbox"). slideup ();} $ (function () {// 5. 페이지가 열린 후 ($ .cookie ( "bg-pic") = s ( "bg-pic"=. // 6. 만약 존재하지 않는 경우, 첫 번째 그림을 기본 배경 $ ( "body")로 설정하십시오. CSS ( "Background-Image", "URL (image/bg0.jpg)") {// 6은 $ .cookie ( "Body (Body)" + $ .cookie ( "bg-pic") + " ')"); //}; 웹 페이지 $ ( "body"). css ( "background-image", "url ( '+src+"') ")의 배경 스타일로 사용하십시오. // 4. 상태를 저장하십시오.생식 이미지 :
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.
저자 : Wangwangwangmax