注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

路径滚动动画插件jQuery Scroll Path

动画 fishcity 3672浏览

jquery路径滚动动画插件jQuery Scroll Path

jQuery Scroll Path是一个jQuery的全屏滚动插件,可以自定义滚动路径,页面内容会沿着路径进行动画移动。该插件使用canvas flavored的语法来绘制路径,可以通过鼠标滚轮上/下箭头键和空格键来查看路径效果;空格键的查看速度会比鼠标滚动的效果快;当你按住Shift键的时候再按空格键时,路径将会向后滚动。除此之外,我们还可以通过这个插件来自定义滚动条。

在滚动路径的时候我们还可以结合使用css来进行变换,使页面可以发生丰富的变换效果。在旧浏览器中,是不支持css3变换效果,那所有的旋转切换将会忽略不计,但仍然遵循自定义的路径。

使用方法

引入核心文件,jquery.easing.js不必须的,只为增添动画效果

<script type="text/javascript" src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script/lib/jquery.easing.js"></script>
<script type="text/javascript" src="script/jquery.scrollpath.js"></script>

写入html,导航也滚动内容分开写,但需要有相对应的ID

<nav>
    <ul>
	<li><a href="#start">1</a></li>
	<li><a href="#description">2</a></li>
	<li><a href="#syntax">3</a></li>
	<li><a href="#scrollbar">4</a></li>
	<li><a href="#rotations">5</a></li>
	<li><a href="#rotations-rotated">6</a></li>
	<li><a href="#source">7</a></li>
	<li><a href="#follow">8</a></li>
    </ul>
</nav>

<div class="wrapper">
  <div class="demo">
    <h1>jQuery Scroll Path</h1>
    <span class="arrow">&darr;</span> 向下滚动演示 <span class="arrow">&darr;</span> </div>
  <div class="description"> <span class="big">这是一个自定义滚动路径的插件。</span> </div>
  <div class="syntax"> <span class="big">它是通过使用canvas来绘制曲线和弧线。</span> </div>
  <div class="scrollbar"> <span class="big">它自带了一个自定义的滚动条。</span> </div>
  <div class="rotations"> <span class="big">同时,它也可以旋转,</span> <span class="upside-down big">但需要浏览器的支持。</span> </div>
  <div class="source"> <span class="big">除了可以用鼠标滚轮上下滚动,还可以用空格键进行较快的滚动。<span> </div>
  <div class="follow"> <span class="big"><a href="http://www.jqcool.net/">jQ酷</a>,是一个专门分享各类jquery插件,并提供详细的jquery插件实例教程、在线预览的网站,目的让站长们更快更轻松的丰富前端效果。本站宗旨:愉快分享,轻松jQ,快速开发!"</span> </div>
</div>

写入JS,初始化插件

$(document).ready(init);

function init() {
	/* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */

	$.fn.scrollPath("getPath")
		// 移到 'start' 元素
		.moveTo(400, 50, {name: "start"})
		// 写路径到 'description' 元素
		.lineTo(400, 800, {name: "description"})
		// 弧度和写路径到 'syntax'
		.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true)
		.lineTo(600, 1600, {
			callback: function() {
				highlight($(".settings"));
			},
			name: "syntax"
		})
		// 继续写路径到 'scrollbar'
		.lineTo(1750, 1600, {
			callback: function() {
				highlight($(".sp-scroll-handle"));
			},
			name: "scrollbar"
		})
		// 画弧,然后旋转
		.arc(1800, 1000, 600, Math.PI/2, 0, true, {rotate: Math.PI/2 })
		//写路径到 'rotations'
		.lineTo(2400, 750, {
			name: "rotations"
		})
		// 旋转到位
		.rotate(3*Math.PI/2, {
			name: "rotations-rotated"
		})
		// 继续画路径到 'source'
		.lineTo(2400, -700, {
			name: "source"
		})
		// 向下的小弧
		.arc(2250, -700, 150, 0, -Math.PI/2, true)

		//写路径到 'follow'
		.lineTo(1350, -850, {
			name: "follow"
		})
		// 画弧与旋转返回开始
		.arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: "end"});

	//上面完成了路径的设置, 接下来实始化到 wrapper 元素上
	$(".wrapper").scrollPath({drawPath: true, wrapAround: true});

	// 给导航链接加上点击滚动事件
	$("nav").find("a").each(function() {
		var target = $(this).attr("href").replace("#", "");
		$(this).click(function(e) {
			e.preventDefault();
			
			//引入 jQuery easing  (http://gsgd.co.uk/sandbox/jquery/easing/)
			// 使用 easing functions 如下
			$.fn.scrollPath("scrollTo", target, 1000, "easeInOutSine");
		});
	});

	/* ===================================================================== */

	$(".settings .show-path").click(function(e) {
		e.preventDefault();
		$(".sp-canvas").toggle();
	}).toggle(function() {
		$(this).text("隐藏路径");
	}, function() {
		$(this).text("显示路径");
	});

	$(".tweet").click(function(e) {
		open(this.href, "", "width=550, height=450");
		e.preventDefault();
	});

	}


function highlight(element) {
	if(!element.hasClass("highlight")) {
		element.addClass("highlight");
		setTimeout(function() { element.removeClass("highlight"); }, 2000);
	}
}
function ordinal(num) {
	return num + (
		(num % 10 == 1 && num % 100 != 11) ? 'st' :
		(num % 10 == 2 && num % 100 != 12) ? 'nd' :
		(num % 10 == 3 && num % 100 != 13) ? 'rd' : 'th'
	);
}

转载请注明:jQ酷 » 路径滚动动画插件jQuery Scroll Path

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。