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

当前位置:主页 > jQuery库 > 布局和界面 > jQuery和css3侧边栏滑出式图片介绍插件
jQuery和css3侧边栏滑出式图片介绍插件
分享:

    插件介绍

    这是一款简洁实用的jQuery和css3侧边栏滑出式图片介绍插件。通常网站上都有人物图片介绍板块,该插件在点击了人物图片后会从右侧边栏滑出该图片的详细介绍信息。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-15
    阅读:

简要教程

这是一款非常实用的 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');
    }
  });
});