是插件的重点部分，它包含一个slider .cd-slider-wrapper和图片信息 .cd-item-info。

• 

  Quick View

CSS样式

首先需要注意的是，该插件的效果在移动设备和手机上隐藏的。原因是使用手机很容易就可以进入到产品页面。

大部分的动画效果都使用jQuery和Velocity.js来完成。半透明的遮罩层使用body::after伪元素来制作。

body::after {

/* dark overlay layer - visible when we fire .cd-quick-view */

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(71, 55, 78, 0.8);

visibility: hidden;

opacity: 0;

transition: opacity .3s 0s, visibility 0s .3s;

}

@media only screen and (min-width: 1024px) {

body.overlay-layer::after {

visibility: visible;

opacity: 1;

transition: opacity .3s 0s, visibility 0s 0s;

}

}

插件中很多元素的动画都带有CSS3 transition。为了是插件性能更好，我们使用了translateZ(0) hack技术。

.cd-quick-view {

display: block;

position: fixed;

max-width: 900px;

visibility: hidden;

/* Force Hardware Acceleration in WebKit */

transform: translateZ(0);

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

will-change: left, top, width;

z-index: 1;

}

JAVASCRIPT

当用户点击了.cd-trigger元素，我们获取被选择图片的top、left和宽度值，并将它放入到.cd-quick-view元素中(该元素是position: fixed的)。通过这个方法使.cd-quick-view拥有和图片相同的大小。

当我们移动.cd-quick-view元素，第一步我们移动.cd-quick-view的宽度到最终宽度(在插件中是400px)。我们也移动.cd-quick-view的位置，使它相对于屏幕居中。在这一步中，只有图片是可见的，图片说明仍被隐藏。

第二步我们 改变.cd-quick-view到它的最终值(屏幕宽度的80%，最大宽度900px)，并改变它的位置使其居中。

我们使用Velocity.js来制作动画效果。这个插件重新实现了jQuery的$.animate()方法，使其性能更加优秀。在插件中，第一步动画使用了spring easing 效果，第二步中使用量为ease easing 效果。

$('.cd-trigger').on('click', function(event){

$('.cd-quick-view').css({

"top": topSelected, // this is the selected image top value

"left": leftSelected, // this is the selected image left value

"width": widthSelected, // this is the selected image width

}).velocity({

//animate the quick view: animate its width and center it in the viewport

//during this animation, only the slider image is visible

'width': sliderFinalWidth+'px',

'left': finalLeft+'px', // ($(window).width - sliderFinalWidth)/2,

'top': finalTop+ 'px', // ($(window).height - slider final height)/2,

}, 1000, [ 400, 20 ])

.velocity({

'width': quickViewWidth+'px', // 80% of the viewport

'left': quickViewLeft+'px', // 10% of the viewport

}, 300, 'ease' ,function(){

//show quick view content

$('.cd-quick-view').addClass('add-content');

}).addClass('is-visible');

//assign .overlay-layer class to the body, assign the .empty-box class to the selected .cd-item

//...

});

当用户关闭图片预览窗口，动画效果也是非常酷的。

注意：在关闭图片预览窗口之前，我们改变了图片的src的值。