効果:( divを皮膚に出して、必要な画像を選択して、Webの背景として、保存してください)
重要:クッキーの保存ステータス
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_con"> <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/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> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
CSSコード:
* {マージン:0px;パディング:0px;}#header {height:40px;幅:100%;背景:#000000;} a {text-decoration:none;}。dbg{float:left;}#dimgbox {width:100%;高さ:140px; /*position:absolute;*/ background:#ffffff;上:0px;左:0px;表示:なし;}#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;マージン左:5px;}。imgitem img {width:100px;}JSコード:
function showimgbox(){$( "#dimgbox")。slidedown();} function hideimgbox(){$( "#dimgbox")。slideup();} $(function(){// 5。 {//存在しない場合、最初の画像を$( "body")、 "url(image/bg0.jpg))に設定します。 「url( ' + $ .cookie( "bg-pic") + "'); // 1./ 1。 $(this).attr( "src"); // 3。複製画像:
Baidu Skinの交換機能を模倣するための上記の簡単な例コードは、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。