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 36px;height:57px;position:fixed;left:20px;top:0px;cursor:pointer; 15 background:url("images/button.png"); 16 } 17 .web{1232px;height:72px;margin:0px auto;display:none;} 18 ul{ 1122px;height:72px; 19 margin:0 auto; 20 overflow:hidden;float:left; 21 } 22 .left{ 23 55px;height:72px;background:url("images/left_jt.png"); 24 float:left; 25 } 26 .right{ 27 55px;height:72px;background:url("images/right_jt.png"); 28 float:right; 29 } 30 ul li{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{158px;height:68px;} 36 ul li p{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>