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

来源：互联网发布：淘宝上传图片尺寸要求编辑：程序博客网时间：2024/06/01 09:38

2017年10月23日

代码编写者：李雨泽

HTML文件；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>手风琴图片切换效果</title>
<link href="css/demo.css" type="text/css"rel="stylesheet"/>
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script src="js/demo.js" type="text/javascript"></script>
</head>
<body>
   <div class="pic">
    <ul>
       <li class="pic1">
       <a href="javascript:;">
         <div class="txt">
       <p class="p1">作者：默默的墨墨</p>
       <p class="p2">我的个人拉萨之旅||故事之城</p>
           </div>
           </a>
       </li>
        <li class="pic2"><a href="javascript:;">
         <div class="txt">
       <p class="p1">作者：默默的墨墨</p>
       <p class="p2">我的个人成都之旅||美食之城</p>
           </div>
           </a>
       </li>
        <li class="pic3"><a href="javascript:;">
         <div class="txt">
       <p class="p1">作者：默默的墨墨</p>
       <p class="p2">我的个人丽江之旅||艳遇之城</p>
           </div>
           </a>
       </li>
        <li class="pic4"><a href="javascript:;">
         <div class="txt">
       <p class="p1">作者：默默的墨墨</p>
       <p class="p2">我的个人武汉之旅||火热之城</p>
           </div>
           </a>
       </li>
   </ul>
   </div>
</body>
</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);

});

});

阅读全文

0 0