亚洲一级毛片,久久伦理电影网,久久草草影视免费网

　　簡要教程
　　這是一款基于HTML5 SVG制作的路徑過渡動畫幻燈片特效。該幻燈片特效使用SVG路徑來剪裁幻燈片中的圖片，制作出幻燈片切換時不規(guī)則的圖形變換效果。

查看演示下載插件

　　使用方法
　　HTML結構
　　該幻燈片特效的HTML結構由包含幻燈片的無序列表ul.cd-slider和兩個作為導航的有序列表元素ul.cd-slider-navigation和ol.cd-slider-controls組成。

　　在ul.cd-slider元素中列表項由一個SVG<clipPath> 元素(用于改變圖片的裁剪區(qū)域)和一個<image>元素組成。

<div class="cd-slider-wrapper">
<ul class="cd-slider" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z">
<li class="visible">
<div class="cd-svg-wrapper">
<svg viewBox="0 0 1400 800">
<title>Aimated SVG</title>
<defs>
<clipPath id="cd-image-1">
<path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/>
</clipPath>
</defs>
<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
</svg>
</div>
</li>
<li>
<div class="cd-svg-wrapper">
<svg viewBox="0 0 1400 800">
</svg>
</div>
</li>
</ul>
<ul class="cd-slider-navigation">
<li><a href="#0" class="next-slide">Next</a></li>
<li><a href="#0" class="prev-slide">Prev</a></li>
</ul>
<ol class="cd-slider-controls">
<li class="selected"><a href="#0"><em>Item 1</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
</ol>
</div>

復制代碼

　　CSS樣式
　　所有的幻燈片slide都設置透明度為0，使用絕對定位，使它們逐個堆疊在一起(使用top: 0 和 left:0)。當前被選擇的幻燈片會被添加.visible class使其變?yōu)榭梢姟Ｔ诩舨脛赢嫳粓?zhí)行的時候，列表項會被添加.is-animating class。

　　注意，特效中使用了Padding Hack來使SVG具有響應式效果(在IE中如果你不明確指定SVG的高度，它會被設置為150px)。在特效中設置div.cd-svg-wrapper的高度為0，padding-bottom為57.15%(為了保持SVG的比例，這里是800/1400)，并設置SVG 的寬度和高度為100%。

.cd-slider > li.visible {
position: relative;
z-index: 2;
opacity: 1;
}
.cd-slider > li.is-animating {
z-index: 3;
opacity: 1;
}
.cd-slider .cd-svg-wrapper {
/* using padding Hack to fix bug on IE - svg height not properly calculated */
height: 0;
padding-bottom: 57.15%;
}
.cd-slider svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

復制代碼

　　JAVASCRIPT
　　為了制作幻燈片圖片剪裁區(qū)域動畫，特效中動畫<clipPath>中的<path>元素的d屬性。

　　這里執(zhí)行動畫的步驟和基于SVG圖形變換的全屏幻燈片特效中是相同的，不同的是這里只需要執(zhí)行6個步驟：3個步驟從當前幻燈片變換到下一個幻燈片，以及3個步驟從前一個幻燈片變換會當前幻燈片。

　　當路徑定義完成后，特效中在.cd-slider元素上添加data-stepn屬性，它等于d屬性中定義的路徑。

　　特效中使用Snap.svg的animate()方法來制作SVG路徑動畫

clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
oldSlide.removeClass('visible');
newSlide.addClass('visible').removeClass('is-animating');
});
});

復制代碼

　　另外，這個幻燈片特效可以使用移動觸摸或鍵盤來控制幻燈片的切換。

　　如果你喜歡這個插件，那么你可能也喜歡:

　　帶38種動畫過渡效果的炫酷jQuery幻燈片插件

　　基于SVG圖形變換的全屏幻燈片特效

　　本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/html5/SVG/201508282487.html

【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業(yè)用途。如損害你的權益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。

久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

HTML5 SVG響應式路徑過渡動畫幻燈片特效

相關文檔推薦