当前位置：首页 > 网页特效 > 图片特效

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

分类：图片特效日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
插件section #cd-team作为wrapper：

```html
<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></li>
  
      <li></li>
    </ul>
  </div>
</section>
```
对于每一张图片的介绍，我们创建div .cd-member-bio，并将它们放在body标签结束之前。

```html
<div class="cd-member-bio member-1">
  <div class="cd-member-bio-pict">
    <img src="img/member-bio-img-1.jpg" alt="">
  </div> 
 
  <div class="cd-bio-content">
    <h1>Meet John Smith</h1>
    <p>......</p>
  </div> 
</div> 
```
##### CSS样式
开始时图片介绍通过设置position:fixed;和right: 0;以及一个等于宽度的 translateX来将它放置在屏幕之外。

```html
.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将被显示：

```html
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');
    }
  });
});
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果