一键换肤原理
效果：通过按键弹出备选皮肤，点击选择样式后，更换成功。
思路：先是布局上我们需要定位，所以为了避免背景把换肤按钮给盖住，需要把按钮的标签放到大背景div的下面，并列结构。假如倒置了可以加层级让其显示。
代码如下：
|
<!DOCTYPE html> <html> <head> <title>换肤</title> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”list.css” rel=”stylesheet” type=”text/css”/> <link href=”reset.css” rel=”stylesheet” type=”text/css”/> <style type=”text/css”> html,body{ width: 100%;height:100%; } p{ width: 100%; height: 50px; background: #000; color:#fff; font-size: 30px; line-height: 50px; text-align: center; position:absolute; top:0; left: 0; cursor: pointer; } body{ width:100%; height:100%; background: url(“img/1.jpg”) no-repeat;background-size: 100% 100%; position:relative; } div{ width:100%; height:100%; opacity: 0.7; background: #000; display: none; } ul{ width: 800px;height:400px;position:absolute;left:50%;top:50%;margin-left: -400px;margin-top: -200px;display: none; } li{ width: 198px;height:198px;border:1px solid #ccc;float: left; } li>img{ width:100%;height:100%; } </style> </head> <body> <div></div> <p>换肤请点我</p> <ul> <li> <img src=”img/1.jpg” alt=””/></li> <li> <img src=”img/2.jpg” alt=””/></li> <li> <img src=”img/3.jpg” alt=””/></li> <li> <img src=”img/4.jpg” alt=””/></li> <li> <img src=”img/5.jpg” alt=””/></li> <li> <img src=”img/6.jpg” alt=””/></li> <li> <img src=”img/7.jpg” alt=””/></li> <li> <img src=”img/8.jpg” alt=””/></li> </ul> <script src=”jquery.min.js” type=”text/javascript”></script> <script type=”text/javascript”> $(“p”).click(function () { $(“p”).slideUp(); $(“div,ul”).show(); }); $(“div”).click(function () { $(“p”).slideDown(); $(“div,ul”).hide(); }); $(“ul li img”).click(function(){ var src=$(this).attr(“src”); $(“body”).css({“background-image”:”url(“+src+”)”}); }); </script> </body> </html> |