Javascript之换肤
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript之换肤相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <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> </html>
以上是关于Javascript之换肤的主要内容，如果未能解决你的问题，请参考以下文章