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/

 

posted on 2014-08-06 14:09  小海豚Dolphins  阅读(1125)  评论(0编辑  收藏  举报