一键换肤原理
效果：通過按鍵彈出備選皮膚，點擊選擇樣式后，更換成功。
思路：先是布局上我們需要定位，所以為了避免背景把換膚按鈕給蓋住，需要把按鈕的標簽放到大背景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{ 100%;height:100%; } p{ 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{ 100%; height:100%; background: url("img/1.jpg") no-repeat;background-size: 100% 100%; position:relative; } div{ 100%; height:100%; opacity: 0.7; background: #000; display: none; } ul{ 800px;height:400px;position:absolute;left:50%;top:50%;margin-left: -400px;margin-top: -200px;display: none; } li{ 198px;height:198px;border:1px solid #ccc;float: left; } li>img{ 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> |
總結
- 上一篇： 东风康明斯六缸210马力与福田康明斯四缸
- 下一篇： 电脑主机怎么连接电视图文教程如何连接电脑