JS鼠标滚动插件scrollpath使用介绍

JS鼠标滚动插件scrollpath：在这个插件中首先要引人的JS是jQuery，因为后面的JS都是基于它的。再者需要引入的是jquery.scrollpath.js、scrollpath.css还有你自己的JS和CSS。

prefixfree.min.js和jquery.easing.js可以根据实际情况自己选择。

首先编写好HTML，在一个绝对定位块中分别布好每个块的位置

 

然后开始根据位置用JS画路径。

定义路径：

$.fn.scrollPath("getPath")

.moveTo(x, y, {name: "start"}) // x,y可以理解为定义x轴，y轴的起始点

 

.lineTo(0, 800, {name: "d1"}) //移动线条，向右向下为正，反之为负，向下直线画路径到名字为d1的点

.lineTo(800, 800,  {

                    callback: function() {

                           alert("到达某一个点后可以定义回调函数")

                    },name: "d2"}

             )

//整个模块旋转360°

.rotate(2*Math.PI, {

                    name: "rotations-rotated"

             })

// 以x = 400，y = 0为圆心,半径是400，画圆弧，水平向右是0度，Math.PI表示180度，-Math.PI/4表示顺时针旋转90度

.arc(400, 0, 400, 0, -Math.PI, true, {name: "d4"});

 

添加路径

$(".wrapper").scrollPath({drawPath: true, wrapAround: true});

显示路径

$(".sp-canvas").show()

绘制路径，可定义速度：

$.fn.scrollPath("scrollTo", target, 1000, "easeInOutSine");

 

绘制的路径效果是这样的http://demo.qpdiy.com/hxw/scrollpath-master/hxw.html

稍微复杂点的路径可以看http://www.jiawin.com/jquery-scroll-path/

 

转载于:https://www.cnblogs.com/huangxiaowen/p/3894484.html