HTMl+CSS+JQuery实现容易的图片滑动切换
HTMl+CSS+JQuery实现简单的图片滑动切换
1 <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>