jQuery制作手风琴图片切换效果

2017年10月23日

代码编写者：李雨泽

HTML文件；


 
 
 
 
 
 
 
 
 
 
 
 
  

   

      
• 
        
          
  
          

  作者：默默的墨墨

  
          

  我的个人拉萨之旅||故事之城

  
            
  
            
        

       
• 
          
  
          

  作者：默默的墨墨

  
          

  我的个人成都之旅||美食之城

  
            
  
            
        

       
• 
          
  
          

  作者：默默的墨墨

  
          

  我的个人丽江之旅||艳遇之城

  
            
  
            
        

       
• 
          
  
          

  作者：默默的墨墨

  
          

  我的个人武汉之旅||火热之城

  
            
  
            
        

    

  

 

css文件代码：
 *{

  padding:0px;
  margin:0px;
  font-family:"微软雅黑";
  list-style-type:none;

}
a{
    text-decoration:none;ss

}
.pic
{

   width:1100px;
   height:430px;
   margin-top:70px;
   /*border:solid 1px red;*/

}

.pic ul li
{
    float:left;
    width:100px;
    height:420px;

}
.pic1{
 
     background-image:url("../image/1.jpg");
}
.pic2{
 
     background-image:url("../image/2.jpg");
}
.pic3{
 
     background-image:url("../image/3.jpg");
}
.pic ul .pic4{
 
     background-image:url("../image/4.jpg");
     width:789px;
}

.txt
{
   background-color:#000px;
   background:rgba(0,0,0,.5);
   height:429px;
   width:100px;

}
.txt p
{
   float:left;
   color:#fff;

}
.txt .p1
{
    font-size:12px;
    width:12px;
    padding:25px 25px 0px 20px;
}
.txt .p2
{
    font-size:14px;
    width:14px;
    margin-top:

}

js文件：
 $(function(){
  $(".pic ul li").mouseover(function(){
     $(this).stop(true,true).animate({width:"789px"},500).siblings().stop(true,true).animate({width:"100px"},500);
 
  });

});