jQuery和css3响应式用户留言内容滑块插件

这是一款jQuery和css3响应式用户留言内容滑块插件。未来更好的用户体验，该内容滑块插件中添加了“查看更多”按钮，点击它可以弹出一个模态窗口来显示所有的用户留言。

该内容滑块插件中集成了两款插件： FlexSlider 用于内容滑块和 Masonry layout 用于模态窗口的页面布局。

HTML结构

html结构使用.cd-testimonials-wrapper作为wrapper。内容滑块是一个无序列表。在内容滑块底部还有一个.cd-see-all作为按钮，链接到模态页面。

<div class="cd-testimonials-wrapper cd-container">
  <ul class="cd-testimonials">
    <li>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="cd-author">
        <img src="img/avatar-1.jpg" alt="Author image">
        <ul class="cd-author-info">
          <li>MyName</li>
          <li>CEO, AmberCreative</li>
        </ul>
      </div>
    </li>
 
    <li><!-- ... --></li>
 
    <li><!-- ... --></li>
  </ul> <!-- cd-testimonials -->
 
  <a href="#0" class="cd-see-all">See all</a>
</div> <!-- cd-testimonials-wrapper -->
                

.cd-testimonials-all 包含另一个无序列表，它是用来显示所有留言的模态窗口。

<div class="cd-testimonials-all">
  <div class="cd-testimonials-all-wrapper">
    <ul>
      <li class="cd-testimonials-item">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit totam saepe iste maiores neque animi molestias nihil illum nisi temporibus.</p>
        
        <div class="cd-author">
          <img src="img/avatar-1.jpg" alt="Author image">
          <ul class="cd-author-info">
            <li>MyName</li>
            <li>CEO, CompanyName</li>
          </ul>
        </div> <!-- cd-author -->
      </li>
 
      <li class="cd-testimonials-item"><!-- ... --></li>
    </ul>
  </div>  <!-- cd-testimonials-all-wrapper -->
 
  <a href="#0" class="close-btn">Close</a>
</div> <!-- cd-testimonials-all -->
                

CSS样式

.flex-direction-nav li {
  position: absolute;
  height: 100%;
  width: 40px;
  top: 0;
}
 
.flex-direction-nav li:first-child {
  left: 0;
}
 
.flex-direction-nav li:last-child {
  right: 0;
}
 
.flex-direction-nav li a {
  display: block;
  height: 100%;
  width: 100%;
 
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
 
  transition: background-color 0.2s;
}
 
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
  /* left and right arrows in css only */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 13px;
  background-color: white;
}
 
.flex-direction-nav li a::before {
  transform: translateY(-35px) rotate(45deg);
}
 
.flex-direction-nav li a::after {
  transform: translateY(-27px) rotate(-45deg);
}
 
.flex-direction-nav li:last-child a::before {
  transform: translateY(-35px) rotate(-45deg);
}
 
.flex-direction-nav li:last-child a::after {
  transform: translateY(-27px) rotate(45deg);
}
                

.cd-testimonials-all元素默认是隐藏的（通过设置Visibility属性实现）。这里使用Visibility属性而不是使用display属性，是因为我们能够在Visibility属性上使用transition，而不能再display属性上使用transition。为了创建fade-in效果，我们需要在透明度属性上使用transition。

下面是一些简化代码：

.cd-testimonials-all {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: white;
  z-index: 2;
  
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
}
 
.cd-testimonials-all.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s 0s, visibility 0s 0s;
}
                

JAVASCRIPT

为了实现内容滑块，我们使用了 Flexslider jQuery plugin by Woothemes。

$('.cd-testimonials-wrapper').flexslider({
  //declare the slider items
  selector: ".cd-testimonials > li",
  animation: "slide",
  //do not add navigation for paging control of each slide
  controlNav: false,
  slideshow: false,
  //Allow height of the slider to animate smoothly in horizontal mode
  smoothHeight: true,
  start: function(){
    $('.cd-testimonials').children('li').css({
      'opacity': 1,
      'position': 'relative'
    });
  }
});
                

在模态窗口中我们使用了 Masonry library 。

$('.cd-testimonials-all-wrapper').children('ul').masonry({
  itemSelector: '.cd-testimonials-item'
});