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"}
)
// 以x = 200，y = 200为圆心,半径是400，画圆弧，水平向右是0度，Math.PI表示180度，-Math.PI/4表示顺时针旋转90度
.rotate(2*Math.PI, {
name: "rotations-rotated"
})
.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/
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
