这是一款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' });