换肤效果 

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10   <style tyle="text/css">
11     *{margin:0px;padding:0px;}
12     body{background:url("images/bg.jpg");}
13     .button{
14         width:36px;height:57px;position:fixed;left:20px;top:0px;cursor:pointer;
15         background:url("images/button.png");
16         }
17     .web{width:1232px;height:72px;margin:0px auto;display:none;}
18     ul{        width:1122px;height:72px;
19             margin:0 auto;
20             overflow:hidden;float:left;
21      }
22     .left{
23         width:55px;height:72px;background:url("images/left_jt.png");
24         float:left;
25         }
26     .right{
27         width:55px;height:72px;background:url("images/right_jt.png");
28         float:right;
29         }
30  ul li{width:158px;height:68px;border:2px solid #fff;border-right:none;
31         list-style-type:none;
32         float:left;position:relative;
33         cursor:pointer;        
34               }
35  ul li img{width:158px;height:68px;}
36  ul li p{width:158px;height:68px;background:#0099ff;
37         position:absolute;bottom:0px;left:0px;
38         opacity:0.6;
39                   }
40   </style>
41  </head>
42  <body>
43   <div class="button"></div>
44   <div class="web">
45     <div class="left"></div>
46     <ul>
47         <li>
48             <img src="images/0.jpg" />
49             <p></p>
50         </li>
51         <li>
52             <img src="images/1.jpg" />
53             <p></p>
54         </li>
55         <li>
56             <img src="images/2.jpg" />
57             <p></p>
58         </li>
59         <li>
60             <img src="images/3.jpg" />
61             <p></p>
62         </li>
63         <li>
64             <img src="images/4.jpg" />
65             <p></p>
66         </li>
67         <li>
68             <img src="images/5.jpg" />
69             <p></p>
70         </li>
71         <li class="last">
72             <img src="images/6.jpg" />
73             <p></p>
74         </li>
75     </ul>
76     <div class="right"></div>
77   </div>
78   <script type="text/javascript" src="js/jquery.js"></script>
79   <script type="text/javascript">
80     $('ul li').hover(function(){
81         
82         $(this).children("p").stop().animate({bottom:"-74px"},300);
83     },function(){
84         $(this).children("p").stop().animate({bottom:"0px"},300);
85     })
86     $('.button').click(function(){
87      $(this).fadeOut(100);
88      $('.web').fadeIn(2000);
89 
90     })
91     $('ul li').click(function(){
92             var i=$(this).index();
93             $('body').css("background",'url(images/'+i+'.jpg)');
94     })
95     
96   </script>
97  </body>
98 </html>

 

posted @ 2015-11-19 21:44  待繁华落尽  阅读(259)  评论(0)    收藏  举报