手风琴-jQuery和TweenMax简单实用的水平手风琴特效 | 蓝文资源库

这是一款使用jQuery和TweenMax制作的简单实用的水平手风琴特效插件。该手风琴插件通过简单的设置和添加样式即可使用，非常简洁大方。

使用方法

使用该旋手风琴特效需要引入jQuery和TweenMax.js、slideOut.js文件。

<script src="js/jquery.min.js"></script>
<script src="/js/TweenMax.min.js"></script>                
<script src="/js/slideOut.js"></script>                

HTML结构

该手风琴特效的基本HTML结构如下：

<div id="panles">
  <div class="panelHolder active">
    <div class="contentHolder"> 
      <img src="tab-1.png" class="tab"> 
      <a href="#"><img src="img-1.png" class="model"> </a> 
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder"> 
      <img src="tab-2.png" class="tab"> 
      <a href="#"><img src="img-2.png" class="model"> </a> 
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder"> 
      <img src="tab-3.png" class="tab"> 
      <a href="#"><img src="img-3.png" class="model"> </a> 
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder"> 
      <img src="tab-4.png" class="tab"> 
      <a href="#"><img src="img-4.png" class="model"> </a> 
    </div>
  </div>
  <div class="panelHolder last">
    <div class="contentHolder"> 
      <img src="tab-5.png" class="tab"> 
      <a href="#"><img src="img-5.png" class="model"> </a> 
    </div>
  </div>
</div>             

CSS样式

可以为该手风琴特效提供一些CSS样式，这些样式可以根据实际需要进行修改。

#panles {
  width: 1212px;
  height: 676px;
  position: relative;
  overflow: hidden;
  background: white;
}
.panelHolder {
  float: left;
  position: relative;
  padding-right: 8px;
  width: 100px;
  height: 676px;
  overflow: hidden;
  background: white;
}
.contentHolder {
  float: left;
  position: relative;
  background: white;
  width: 772px;
}
.tab {
  width: 100px;
  position: absolute;
  z-index: 1;
}
.model {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 676px;
}
.panelTitle.last { padding: 0; }
.active.panelHolder { width: 772px; }
.active .tab { opacity: 0; }
.active .model {
  visibility: visible;
  z-index: 0;
  opacity: 1;
}   

在线预览网盘下载

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

使用方法

HTML结构

CSS样式

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复