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/

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

时间: 2024-10-06 13:27:20

JS鼠标滚动插件scrollpath使用介绍的相关文章

15款fullpage.js鼠标滚动页面动画展示特效

jquery全屏鼠标滚动切换fullpage页面模板下载 html5响应式页面滚动背景图片动画特效 酷炫html5 css3全屏滚动动画专题模板 html5腾讯互动娱乐网站鼠标滚动展示模板 html5平安儿童手表页面滚动简约单页模板 html5叮咚手机app下载页面滚动展示特效 jquery fullPage证券股票软件页面滚屏动画特效 jquery.fullpage.js360安全路由全屏页面滚动效果 html5新年快乐医院专题页介绍模板下载 html5雷锋wifi软件介绍页面下滑滚动式特效

鼠标交互插件threex.domevents介绍

threex.domevents是一个three.js的扩展库,支持3D场景的交互.和我们操作DOM树的事件相似,名称都是一样的.所以使用起来非常方便.另外他也提供了连接操作.单击网格可实现跳转功能. 如果仅仅使用Dom事件,需要引入: <script src='threex.domevents.js'></script> 如果需要使用链接跳转,还需要引入: <script src="threex.linkify.js"></script>

scrollify.js 鼠标滚动

在线实例 实例演示 使用方法 <! doctype html> <html> <head> <script> $(function() { $.scrollify({ section : "section", }); }); </script> </head> <body> <section></section> <section></section> &

手写js面向对象选项卡插件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>无缝滚动</title>    <style type="text/css">        body,ul{margin: 0;padding: 0;}        li{list-style: none;}  

FullPage.js全屏滚动插件学习总结

如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js 主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 实

Query全屏滚动插件fullPage.js

简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支

fullPage.js—全屏动态滚动插件

1.前言 全屏大图.简约风的网页给人第一印象就是高端大气上档次,很多手机厂商的手机宣传页面都是采用了这种设计风格,苹果的官网更是体现的淋漓尽致(栗子?). fullPage.js就是专门为此而打造的支持全屏页面动态滚动的插件,先贴个浏览器兼容图: 查看演示:一睹为快? 主要特性: 支持鼠标滚动 支持前进后退和键盘控制 支持回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式 2.用法 在这里介绍最简单的用法: (1

jQuery-全屏滚动插件【fullPage.js】API 使用方法总结

jQuery-全屏滚动插件fullPage.js使用方法总结 作者github及下载地址:https://github.com/alvarotrigo/fullPage.js 今天说下jQuery的一款插件fullpage.js,可以实现全屏滚动,非常流行的效果,兼容性IE8+ 还算不错,使用网站有小米,等电子产品.汽车全屏滚动展示,看起来比较高大上,接下来我全面解析下此款插件!附我做的一个简易效果,刚入博客园,不知能怎么上demo,只能截图了! 兼容性: 支持 IE8+ 及其他现代浏览器. 主

jquery.fullPage.js全屏滚动插件

效果演示 网站   http://www.51xuediannao.com/demo.php 插件下载  http://www.51xuediannao.com/js/jquery/jquery.fullPage.html jquery.fullPage.js是一个全屏滚动插件,本文提供jquery.fullPage实例教程演示 看啥都不如看演示来的直观,走起! 基本滚动 http://www.51xuediannao.com/js/jquery/jquery.fullPage/index2.h