Home > Article > Web Front-end > jQuery实现垂直半透明手风琴特效代码分享_jquery

jQuery实现垂直半透明手风琴特效代码分享_jquery

WBOYOriginal: 2016-05-16 15:43:391410browse

今天我们来分享一款基于jQuery的横向手风琴图片轮播焦点图特效源码。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很广泛，大家可以试试这款jQuery焦点图。

运行效果图：

---------------------------------效果演示源码下载---------------------------------

为大家分享的jQuery半透明抽屉式手风琴代码如下

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

以上就是为大家分享的jQuery半透明抽屉式手风琴代码，希望大家可以喜欢。

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实现叠层3D文字特效代码分享_jqueryNext article：使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室_javascript技巧

See more

jQuery实现垂直半透明手风琴特效代码分享_jquery

Related articles