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

最新推荐文章于 2022-08-16 14:18:15 发布

原创最新推荐文章于 2022-08-16 14:18:15 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#自学之路 #jquery #html

软件开发与测试专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及jQuery实现的手风琴图片切换效果案例。通过鼠标悬停，图片区块会动态展开显示不同城市背景图片，并附带简短文字说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);

});

});