search

Home  >  Article  >  Web Front-end  >  jQuery implements vertical translucent accordion special effect code sharing_jquery

jQuery implements vertical translucent accordion special effect code sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:43:391471browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery implements overlay 3D text effects code sharing_jqueryNext article：jquery implements overlay 3D text effects code sharing_jquery

Related articles

See more