基于SVG路徑運動的js內容切換插件path-slider怎么用，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

專注于為中小企業(yè)提供成都做網站、成都網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)平橋免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。

path-slider.js是一款基于SVG路徑運動的js內容切換輪播插件。該js輪播插件可以根據指定的SVG路徑，分布排列多個DOM元素，然后使這些DOM元素在SVG路徑上執(zhí)行輪播動畫。

使用方法

在頁面中引入anime.min.js和path-slider.js文件。

HTML結構

一個最簡單的基于SVG路徑運動的js輪播效果的HTML結構如下。

       

                                           

           

Chat

                           

           

Alarm clock

                           

           

Camera

                           

           

Envelope

                           

           

Light bulb

           

可以看到有一條SVG path路徑，在路徑上有以及5個SVG做成的圖案。

初始化插件

在頁面DOM元素加載完畢之后，通過下面的方法來初始化該插件。

(function () {    // 設置選項    var options = {        startLength: 0, // 定義開始位置        duration: 3000, // 動畫時長        stagger: 15, // 每個動畫之間的延遲時間        easing: 'easeOutElastic', // easing function (used by anime.js)        elasticity: 600, // elasticity factor (used by anime.js)        rotate: true // This indicates that items should be rotated properly to match the SVG path curve    };     // 調用    new PathSlider('.path-slider__path', '.path-slider__item', options); })();

其中，PathSlider()有三個參數，分別表示：

path

• ：SVG路徑

items

• ：DOM元素

options

• ：配置參數




配置參數

path-slider.js插件常用的配置參數有：

startLength：(float 或 'center') 開始定位元素的路徑的長度。

activeSeparation：(float) 當前項與相鄰項之間的距離。

paddingSeparation：(float) 在路徑的開始和結束處的內間距。

duration、delay、easing和elasticity：這4個參數是anime.js插件的配置參數。

stagger：(ms) 每個項目動畫之間的延遲。

begin：(function) 每一項開始動畫后的回調函數。

end：(function) 每一項結束動畫后的回調函數。

beginAll：(function) 所有項開始動畫后的回調函數。

endAll：(function) 所有項結束動畫后的回調函數。

blockUntilEnd：(boolean) 默認為false，如果設置為true，你需要等當前動畫結束之后，才能選項另外的項。

clickSelection：(boolean) 默認為true，為每一個項添加click事件監(jiān)聽。

看完上述內容，你們掌握基于SVG路徑運動的js內容切換插件path-slider怎么用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱：基于SVG路徑運動的js內容切換插件path-slider怎么用-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/spjpi.html