javascript 45种缓动效果 非常酷


Posted in Javascript onJune 28, 2011

ble class="3waterborder" style="FONT-SIZE: 12px" cellspacing="0" cellpadding="0" border="1"> 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 duration number 可选,缓动效果持续时间,默认是500ms。建议取300~1000ms。 field string 必需,要发生变化的样式属性。请在top,left,bottom,right,width与height中选择。 ftp number 可选,每秒进行多少帧动画,默认50帧,保证流畅播放。一些参考资料,日本动画1秒36帧,中国卡通24帧,赛车游戏60帧。 ease function 必需,缓动公式,参数为0~1之间的数。可参考我下面给出的45条公式。 onStart function 可选,在开始时执行。 onEnd function 可选,在结束时执行。 prototype流派的缓动公式,只需一个参数(增至45种)

'; }).join('') + '
' +'
'; demo.innerHTML = grid + graph; var indicator = _("indicator"), marker = _("marker"), label = _("label"), demoTransition = function(pos){ var value = tween[ease](pos); indicator.style.display = "block"; marker.style.display = "block"; marker.style.left = Math.round(pos*200)+'px'; marker.style.bottom = Math.round((value*200-min)*factor)+'px'; label.innerHTML = Math.round(pos*200)+'px'; return value; } transition(indicator,{field:"left",begin:parseFloat(getCoords(demo).left),change:200, ease:demoTransition}) } window.onload = function(){ var panelHTML = function(){ var builder = []; var _temp = 'Back Circ Cubic Expo Quad Quart Quint Sine'.split(' '); var ease = _temp.map(function(v){ return 'easeIn'+v; }); ease = ease.concat(_temp.map(function(v){ return 'easeOut'+v; })); ease = ease.concat(_temp.map(function(v){ return 'easeInOut'+v; })); ease = ease.concat('blink bounce bouncePast easeFrom easeFromTo easeOutBounce easeTo elastic'.split(' ')); ease = ease.concat('flicker full linear mirror none pulse reverse sinusoidal spring swingTo swingFrom swingFromTo wobble'.split(' ')) for(var i =0,l=ease.length;i"); builder.push(ease[i]); builder.push("

Javascript 相关文章推荐
js常用排序实现代码
Dec 28 Javascript
js实现的折叠导航示例
Nov 29 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
js实现文字截断功能
Sep 14 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 #Javascript
关于js类的定义
Jun 28 #Javascript
js 编程笔记 无名函数
Jun 28 #Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 #Javascript
基于jquery的回到页面顶部按钮
Jun 27 #Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 #Javascript
jquery中获取select选中值的代码
Jun 27 #Javascript
You might like
PHP实现的封装验证码类详解
2013/06/18 PHP
帝国cms常用标签汇总
2015/07/06 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
php工具型代码之印章抠图
2018/07/18 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python实现ftp文件传输功能
2020/03/20 Python
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
销售文员的岗位职责
2013/11/20 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
班主任经验交流材料
2014/12/16 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技