插件介绍
这是一款基于SVG clipPath（剪裁路径）和mask遮罩元素的炫酷jQuery幻灯片特效。该幻灯片利用圆形的前后导航按钮，在用户点击按钮时，按钮会平滑放大，显示出下一张幻灯片。
简要教程
这是一款基于SVG clipPath（剪裁路径）和mask遮罩元素的炫酷jQuery幻灯片特效。该幻灯片利用圆形的前后导航按钮，在用户点击按钮时，按钮会平滑放大，显示出下一张幻灯片。
使用方法
HTML结构该幻灯片的HTML结构包括2个部分：ul.cd-radial-slider是幻灯片的slides，ul.cd-radial-slider-navigation是导航按钮。
ul.cd-radial-slider中的列表项又包括2个部分：.svg-wrapper是一个SVG容器，它里面有一个<clipPath>元素，用于改变幻灯片的剪裁区域。另外一个是<image>元素，它的clip-path属性是<clipPath>元素的ID。
另外使用.cd-round-mask来包裹两个<mask>元素。
<div class=”cd-radial-slider-wrapper”>
<ul class=”cd-radial-slider” data-radius1=”60″ data-radius2=”1364″ data-centerx1=”110″ data-centerx2=”1290″>
<li class=”visible”>
<div class=”svg-wrapper”>
<svg viewBox=”0 0 1400 800″>
<title>Animated SVG</title>
<defs>
<clipPath id=”cd-image-1″>
<circle id=”cd-circle-1″ cx=”110″ cy=”400″ r=”1364″/>
</clipPath>
</defs>
<image height=’800px’ width=”1400px” clip-path=”url(#cd-image-1)” xlink:href=”img/img-1.jpg”></image>
</svg>
</div> <!– .svg-wrapper –>
<div class=”cd-slider-content”>
<div class=”wrapper”>
<div>
<h2>Slide #1 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<a href=”#0″ class=”cd-btn”>Learn More</a>
</div>
</div>
</div> <!– .cd-slider-content –>
</li>
<li class=”next-slide”>
<!– … –>
</li>
<!– additional slides here –>
</ul> <!– .cd-radial-slider –>
<ul class=”cd-slider-navigation”>
<li><a href=”#0″ class=”next”>Next</a></li>
<li><a href=”#0″ class=”prev”>Prev</a></li>
</ul> <!– .cd-slider-navigation –>
<div class=”cd-round-mask”>
<svg viewBox=”0 0 1400 800″>
<defs>
<mask id=”cd-left-mask” height=’800px’ width=”1400px” x=”0″ y=”0″ maskUnits=”userSpaceOnUse”>
<path fill=”white” d=”M0,0v800h1400V0H0z M110,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S143.137,460,110,460z”/>
</mask>
<mask id=”cd-right-mask” height=’800px’ width=”1400px” x=”0″ y=”0″ maskUnits=”userSpaceOnUse”>
<path fill=”white” d=”M0,0v800h1400V0H0z M1290,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S1323.137,460,1290,460z”/>
</mask>
</defs>
</svg>
</div>
</div> <!– .cd-radial-slider-wrapper –>
CSS样式
幻灯片的样式也非常简单：所有的slide的透明度都为0，定位方式使用绝对定位，它们通过left:0;top:0;设置为相互堆叠在一起，.visible class类会被添加到当前选择的slide上，使该slide的定位方式从绝对定位变为相对定位，同时在剪裁动画期间，会为slide添加一个.is-animating class类，用于改变它的z-index值。
有2个辅助class类用于制作圆形导航动画：.scale-down class用于在新的slide被选择的时候，隐藏前一个slide。.move-up class用于导航被点击的时候创建点击效果。
.cd-radial-slider > li {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: transform .2s;
}
.cd-radial-slider > li.visible {
position: relative;
opacity: 1;
}
.cd-radial-slider > li.is-animating,
.cd-radial-slider > li.prev-slide,
.cd-radial-slider > li.next-slide {
opacity: 1;
}
.cd-radial-slider > li.is-animating {
z-index: 2;
}
.cd-radial-slider > li.scale-down,
.cd-radial-slider > li.move-up {
z-index: 3;
}
.cd-radial-slider > li.move-up {
animation: cd-clicked .2s;
}
.cd-radial-slider > li.scale-down {
transform: scale(0);
}
.cd-radial-slider > li.next-slide {
transform-origin: 92.14% 50%;
}
.cd-radial-slider > li.prev-slide {
transform-origin: 7.86% 50%;
}
JavaScript
在Js代码中，创建了一个radialSlider对象，并使用bindEvents方法来为幻灯片的导航点击绑定事件。
var radialSlider = function(element) {
this.element = element;
this.slider = this.element.find(‘.cd-radial-slider’);
this.slides = this.slider.children(‘li’);
//…
this.navigation = this.element.find(‘.cd-radial-slider-navigation’);
//…
this.bindEvents();
}
radialSlider.prototype.bindEvents = function() {
var self = this;
//update visible slide when clicking the navigation round elements
this.navigation.on(‘click’, function(event){
if( !self.animating ) {
self.animating = true;
event.preventDefault();
var direction = ( $(event.target).hasClass(‘next’) ) ? ‘next’ : ‘prev’;
//update radialSlider index properties
self.updateIndexes(direction);
//show new slide
self.updateSlides(direction);
}
});
}
为了使图片剪裁区域产生动画，代码中动态修改<clipPath>元素中的&lr;circle>元素的r属性。
在.cd-radial-slider元素中有2个data属性：data-radius1和data-radius2，它们分别用于接收圆形的初始值和最终值。另外data-centerx1和data-centerx2属性用于使<circle>元素居中。
在Js代码中使用Snap.svg的animate()方法来最终圆形的扩展动画效果。
clipPathVisible.animate(
{‘r’: radius2}, duration, customMinaAnimation, function(){
//callback function here
});
为了在当前选择的幻灯片上应用遮罩效果，Js代码中动态修改了<image>元素的样式，例如，为了使下一个幻灯片可见，使用下面的代码：
this.slides.eq(this.visibleIndex).find(‘image’)
.attr(‘style’, ‘mask: url(#’+this.rightMask.attr(‘id’)+’)’);
this.slides.eq(this.visibleIndex)是可见的幻灯片slide，this.rightMask.attr(‘id’)是<mask>元素的ID。
网盘下载密码：5rqt
