<head>
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
3 <title>t图片的滑动</title>
4 <meta charset="utf-8" />
5 <style type="text/css" >
6 *{
7 margin:0;
8 padding:0;
9
10 }
11 #main{
12 width:1089px;
13 height:360px;
14 margin:100px;
15 background:url(../image/7.png);
16 }
17 ul li{
18 list-style:none ;
19 width:100px;
20 height:360px;
21 float:left;
22 }
23 a{
24 color:#ffffff;
25 text-decoration:none;
26 }
27 .txt{
28 width:100px;
29 height:360px;
30 float:left;
31 background:rgb(182, 255, 0);
32 }
33 p{
34 font-family :"Arial.black",Gadugi.sans-serif ;
35 font-size:18x;
36 position:relative ;
37 width:18px;
38 font-weight:bold ;
39 margin-top :120px;
40 margin-left:48px;
41 }
42 .li1 {
43 background: url( ../image/43.png);
44 }
45 .li2{background: url( ../image/42.png);}
46 .li3{background: url( ../image/39.png);}
47 .li4{background: url( ../image/47.png);}
48 </style>
49
50 </head>
51 <body>
52 <div id="main">
53 <ul>
54 <li class=" li1"><a href=" #"><div class=" txt"><p>风景1</p></div></a></li>
55 <li class=" li2"><a href=" #"><div class=" txt"><p>风景2</p></div></a></li>
56 <li class=" li3"><a href=" #"><div class=" txt"><p>风景3</p></div></a></li>
57 <li class=" li4"><a href=" #"><div class=" txt"><p>风景4</p></div></a></li>
58 </ul>
59 </div>
60 <script type="text/javascript" src="../Jqurey/jquery.min.js"></script>
61 <script >
62 $(‘ul li‘).hover(function(){
63 $(this).stop(true).animate({ width: ‘789px‘ }, 500).siblings().stop(true).animate({width:‘100‘},500);
64 })
65 </script>
66 </body>
67 </html>原文：http://www.cnblogs.com/jiny123/p/4987315.html