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/
JS鼠标滚动插件scrollpath使用介绍