jQuery和css3侧边栏滑出式图片介绍插件

这是一款非常实用的 jQuery和css3侧边栏滑出式图片介绍插件。它利用隐藏侧边栏来制作图片的详细信息介绍，大大的节约了空间，而且用户不必多次刷新页面。

 

在线预览  下载

HTML结构

插件section #cd-team作为wrapper：

<section id="cd-team" class="cd-section">

  <div class="cd-container">

    <h2>Our team</h2>

    <ul>

      <li>

        <a href="#0" data-type="member-1">

          <figure><!-- .... --></figure>

          <div class="cd-member-info"><!-- .... --></div>

        </a>

      </li>

       

      <li><!-- member 2 --></li>

  

      <li><!-- .... --></li>

    </ul>

  </div>

</section>

对于每一张图片的介绍，我们创建div .cd-member-bio，并将它们放在body标签结束之前。

<div class="cd-member-bio member-1">

  <div class="cd-member-bio-pict">

    <img src="img/member-bio-img-1.jpg" alt="">

  </div> <!-- cd-member-bio-pict -->

 

  <div class="cd-bio-content">

    <h1>Meet John Smith</h1>

    <p>......</p>

  </div> <!-- cd-bio-content -->

</div> <!-- cd-member-bio -->

CSS样式

开始时图片介绍通过设置position:fixed;和right: 0;以及一个等于宽度的 translateX来将它放置在屏幕之外。

.cd-member-bio {

  position: fixed;

  top: 0;

  right: 0;

  width: 270px;

  height: 100%;

  overflow-y: auto;

  /* smooth scrolling on mobile phones and tablets */

  -webkit-overflow-scrolling: touch;

  /* this how we move the author bio section off the canvas */

  transform: translateX(270px);

  transition-property: transform;

  transition-duration: 0.3s;

}

当用户点击了其中一张图片，我们使用jQuery为div.cd-member-bio添加class .slide-in。这个class修改translateX的值为0。-webkit-overflow-scrolling: touch用于在webkit内核的浏览器中使滚动更加平滑。当你使用overflow 属性时，推荐你添加这个属性。

我们给body一个overflow-x: hidden;是为了在IE浏览器中阻止水平滚动条的出现。

JAVASCRIPT

我们给每一张图片都添加了data-type属性，当用户点击了一张图片，等于该data-type的class将被显示：

jQuery(document).ready(function($){

  var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;

 

  //open team-member bio

  $('#cd-team').find('ul a').on('click', function(event){

    event.preventDefault();

    var selected_member = $(this).data('type');

    $('.cd-member-bio.'+selected_member+'').addClass('slide-in');

    $('.cd-member-bio-close').addClass('is-visible');

 

    // firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden

    if( is_firefox ) {

      $('main').addClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){

        $('body').addClass('overflow-hidden');

      });

    } else {

      $('main').addClass('slide-out');

      $('body').addClass('overflow-hidden');

    }

 

  });

 

  //close team-member bio

  $(document).on('click', '.cd-overlay, .cd-member-bio-close', function(event){

    event.preventDefault();

    $('.cd-member-bio').removeClass('slide-in');

    $('.cd-member-bio-close').removeClass('is-visible');

 

    if( is_firefox ) {

      $('main').removeClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){

        $('body').removeClass('overflow-hidden');

      });

    } else {

      $('main').removeClass('slide-out');

      $('body').removeClass('overflow-hidden');

    }

  });

});