jQuery implements vertical translucent accordion special effect code sharing

jQuery implements vertical translucent accordion special effect code sharing_jquery

WBOY

Release： 2016-05-16 15:43:39

Original

1447 people have browsed it

Today we will share the source code of a horizontal accordion image carousel focus image special effect based on jQuery. The accordion effect means that pictures are layered one by one, and the complete picture can be expanded when the mouse slides over the picture. This effect is very common, so it is also widely used. You can try this jQuery focus map.

Operation rendering:

---------------------------------Effect demonstration Source code download---------------------------------

The jQuery translucent drawer accordion code shared with you is as follows

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery半透明抽屉式手风琴代码</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.pic{width:1100px;height:430px;margin:70px auto 0;}
.pic ul li{list-style:none;width:100px;height:429px;float:left;}
.pic .l1{background-image:url(img/1.jpg);}
.pic .l2{background-image:url(img/2.jpg);}
.pic .l3{background-image:url(img/3.jpg);}
.pic .l4{background-image:url(img/4.jpg);width:789px;}
.txt{width:100px; height:429px;background:#000;filter:alpha(opacity=50);background:rgba(0,0,0,.5);}
.txt p{color:#fff;font-family:"微软雅黑";float:left;position:relative;}
.txt .p1{font-size:12px;width:12px;margin:25px 25px 0 20px;}
.txt .p2{font-size:14px;width:14px;margin-top:25px;}
</style>

</head>

<body>

<div class="pic">
 <ul>
 <li class="l1">
  <a href="http://www.jb51.net" target="_blank">
  <div class="txt">
   <p class="p1">作者 ： 走天涯</p>
   <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
  </div>
  </a>
 </li>
 <li class="l2">
  <a href="http://www.jb51.net" target="_blank">
  <div class="txt">
   <p class="p1">作者 ： 走天涯</p>
   <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
  </div>
  </a>
 </li>
 <li class="l3"> 
  <a href="http://www.jb51.net" target="_blank">
  <div class="txt">
   <p class="p1">作者 ： 走天涯</p>
   <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
  </div>
  </a>
 </li>
 <li class="l4">     
  <a href="http://www.jb51.net" target="_blank">
  <div class="txt">
   <p class="p1">作者 : 走天涯</p>
   <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
  </div>
  </a>
 </li>
 </ul>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".pic ul li").hover(function(){
 $(this).stop(true).animate({width:"789px"},500).siblings().stop(true).animate({width:"100px"},500);
});
</script>
</body>
</html>

Copy after login

The above is the jQuery translucent drawer accordion code shared with you, I hope you like it.