滚动和动画化页面的简单方法
Posted
tags:
中文标题：滚动和动画化页面的简单方法 原文标题：The easy way to scroll and animate your page 项目评级：Star:544 Fork:36 下载地址：https://github.com/gravmatt/force-js 详情介绍部队.js
最后，一种简单的方法来制作元素的动画并在页面上跳转。
它有不同的缓解功能（如下所列），并尝试（默认情况下）使用CSS过渡来动画元素。
如果浏览器不支持转换，force.js会回退到本地javascript函数。
Force.js支持更旧的浏览器版本，不支持转换。
转到force js页面并尝试一下！
要在页面上使用它，只需在HTMLHEAD或BODY标签的底部写下这行代码。
<script src="force.js" type="text/javascript"></script>
支持AMD和节点模块模式（包括浏览）
把它放在鲍尔身上
bower install force-js
通过cdnjs获取
只需将其复制并粘贴到您的项目中即可。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/force-js/0.1.1/force.min.js"></script>
转到cdnjs上的force-js页面。
jQuery公司
Force.js是100%纯香草！！！
但对于所有不想错过jQuery的程序员来说。
Force.js会自动检测jQuery，并使用Force.move（）和Force.jump（）函数扩展其Object。
因此，您可以在jQuery对象中使用force.js。
$('#ball').move(left: 100px, top: 50px, 1000);
要在jQuery中使用force.js，请先编写jQuery TAG。因此force.js可以在之后扩展其对象
在页面上跳转比每一个都容易。
要自动检测页面上的哈希链接，只需使用force.bindHashes（）函数即可。
force.bindHashes();
但如果你想自己做，可以使用force.sump（）函数。
var element = document.getElementBy('element-id');
// jump by object
force.jump(element);
// jump by selector
force.jump('#element-id');
您可以将该功能与其他选项一起使用。
force.jump(target);
var options =
setHash: false
// if set to TRUE, it sets the hash/id value of the element in the URL
duration: 500,
done: function() ,
easing: 'easeInQuad',
;
force.jump(target, options);
或者jQuery扩展。
$('#ball').jump();
//$('#ball').jump(options);
移动
也可以使用force.js为元素设置动画。
要做到这一点，只需使用force.move（）函数。
var element = document.getElementBy('element-id');
// jump by object
force.move(element, left: 100px, top: 50px, 1000);
// jump by selector
force.move('#element-id', left: 100px, top: 50px, 1000);
您可以将该功能与其他选项一起使用。
force.move(target, properties, duration, doneCallback);
var options =
properties:
left: '100px'
,
duration: 500,
done: function() ,
easing: 'easeInQuad'
;
force.move(target, options);
或者jQuery扩展。
$('#ball').move(left: 100px, top: 50px, 1000);
// $('#ball').move(options, duration, doneCallback);
如果您多次使用该功能，请不要担心。
force.move（）函数已缓存！
这意味着，如果上一次调用完成，函数就会被执行。
选项
在force.js中，您可以修改您想要的一切以满足您的需求。
// edit single option
force.opt.cacheScrolling = true;
// or use the config function and paste an object to override the old settings.
force.config( cacheScrolling: true );
hashLinkPattern:'a[href*=“#”]：不是（[href=“#”]'）
这是一个选择器，用于通过执行force.bindHashes（）函数来查找页面中的哈希链接。
框架：60
默认情况下，force.js以每秒60帧的速度运行。
您也可以编辑此属性。
但是要小心！
您既可以提高页面的性能，也可以降低页面的性能。
moveDuration:1000 AND jumpDuration:100移动持续时间：1000
force.move（）和force.sjump（）函数的默认持续时间为1000毫秒。
如果需要，可以通过在配置对象中设置duration属性来覆盖函数内部的此值。
moveEasing:“摇摆”和jumpEasing:”摇摆“
默认的宽松功能是swing，但您可以将其更改为：
*这种轻松功能不适用于css转换，而是使用本机javascript。
但别担心，force.js会自动为您执行此操作！
cacheJumps:true
默认情况下会缓存页面跳转。
也就是说，只有在上一跳完成后，下一跳才会设置动画。
将其设置为FALSE，跳转将立即停止并开始新的跳转。
cssTransitions:真
默认情况下，如果浏览器支持，force.js会尝试使用css转换。
使用转换看起来比本机javascript流畅得多，并且不会阻塞事件循环。
我建议它在默认情况下让它打开。
如果浏览器不支持，force.js会自动管理转换的使用。
许可证
Force.js是在麻省理工学院的许可下出版的。因此，请随时使用、共享或修改它！