基于SVG路径运动的js内容切换插件path-slider怎么用-创新互联

基于SVG路径运动的js内容切换插件path-slider怎么用,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

专注于为中小企业提供成都做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业平桥免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

path-slider.js是一款基于SVG路径运动的js内容切换轮播插件。该js轮播插件可以根据指定的SVG路径,分布排列多个DOM元素,然后使这些DOM元素在SVG路径上执行轮播动画。

使用方法

在页面中引入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事件监听。

看完上述内容,你们掌握基于SVG路径运动的js内容切换插件path-slider怎么用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页名称:基于SVG路径运动的js内容切换插件path-slider怎么用-创新互联
浏览地址:http://pwwzsj.com/article/spjpi.html