Javascript之换肤（未完待续）

时间：2022-01-12 03:51:34

这个项目我还没有完全写出来，先记录至此。感觉是方法不对，背景图片的切换方法有Problem。如若有一大神发现了我的文章，还望指导，吾将感激不尽。日后代码还会再钻研再改改。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<style type="text/css">
*{margin:0px;}
img{margin:0px 1px 1px 0px;}
body{background:url("http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_1.jpg"); }
#huanfu{width:100%; height:200px; background:#fff; position:absolute; top:0px; left:0px; display:none;}
#huanfu .hfImg{width:590px; height:180px; margin:0px auto;}
.one{width:196px; height:180px; float:left;}
.two{width:98px; height:180px; float:left;}
a:hover img{filter:Alpha(opacity=70);-moz-opacity: 0.7; opacity: 0.7; }
.hfImg a{ float:left; position:relative; }
img.skin{ position:absolute; right:5px; bottom:5px; display:none;}
</style>

</head>
<body>
<p class="button" align="center">换肤</p>
<div id="huanfu">
<div class="hfImg">
<div class="one">
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_1.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/o_1-1.jpg" width='195' height='119' />
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_2.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_2-2.jpg" width='97' height='59'/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_3.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_3-3.jpg" width='97' height='59' />
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
</div>

<div class="two">
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_4.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_4-4.jpg" width='97' height='59'/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_5.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_5-5.jpg" width='97' height='59'/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_6.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_6-6.jpg" width='97' height='59'/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/></a>
</div>

<div class="one">
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_7.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_7-7.jpg" width='97' height='59'/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_8.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_8-8.jpg" width='97' height='59' />
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_9.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_9-9.jpg" width='195' height='119' />
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
</div>
<div class="two">
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_10.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_10-10.jpg" width='97' height='59'/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_11.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_11-11.jpg" width='97' height='59'/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_12.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_12-12.jpg" width='97' height='59'/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
</a>
</div>
</div>
</div>

<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(".button").click(function(e){
//慢慢向下滑动，展开
$("#huanfu").slideToggle("quick");
//阻止事件
e.stopPropagation();
});

$("#huanfu .hfImg a").click(function(e){
var src=$(this).find("img").attr("src").replace(/-\d*/,"");
$("body").css("background","url("+src+")");
//$(this).find(".skin").show().parent().parent().siblings().find(".skin").hide();
//先隐藏所有
$("#huanfu .hfImg a").find(".skin").hide();
//再显示当前
$(this).find(".skin").show();
//保存会话里面
sessionStorage.setItem("src",src);
//阻止事件
e.stopPropagation();
});

$(document).click(function(e){
//慢慢隐藏
$("#huanfu").slideUp("slow");
//阻止事件

e.stopPropagation();
});

var sessionSrc=sessionStorage.getItem("src");
if(sessionSrc){
$("body").css("background","url("+sessionSrc+")");
}

</script>
</body>

//

相关文章