<script>

function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0;
if(attr == 'opacity'){
iCur = Math.round(getStyle(obj,attr)*100);
}
else{
iCur = parseInt(getStyle(obj,attr));
} var iSpeed = (json[attr] - iCur)/5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur != json[attr]){ bBtn = false;
} if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity='+(iCur+iSpeed)+')';
obj.style.opacity = (iCur + iSpeed)/100;
}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}
} if(bBtn){
clearInterval(obj.timer);
fn && fn.call(obj);
}
},30);
} function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,250)[attr];
} function startMove2(obj,json,times,fx,fn){ if( typeof times == 'undefined' ){
times = 400;
fx = 'linear';
} if( typeof times == 'string' ){
if(typeof fx == 'function'){
fn = fx;
}
fx = times;
times = 400;
}
else if(typeof times == 'function'){
fn = times;
times = 400;
fx = 'linear';
}
else if(typeof times == 'number'){
if(typeof fx == 'function'){
fn = fx;
fx = 'linear';
}
else if(typeof fx == 'undefined'){
fx = 'linear';
}
} var iCur = {}; for(var attr in json){
iCur[attr] = 0; if( attr == 'opacity' ){
if(Math.round(getStyle(obj,attr)*100) == 0){
iCur[attr] = 0;
}
else{
iCur[attr] = Math.round(getStyle(obj,attr)*100) || 100;
}
}
else{
iCur[attr] = parseInt(getStyle(obj,attr)) || 0;
} } var startTime = now(); clearInterval(obj.timer);
obj.timer = setInterval(function(){ var changeTime = now(); var scale = 1 - Math.max(0,startTime - changeTime + times)/times; for(var attr in json){ var value = Tween[fx](scale*times, iCur[attr] , json[attr] - iCur[attr] , times ); if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity='+ value +')';
obj.style.opacity = value/100;
}
else{
obj.style[attr] = value + 'px';
} } if(scale == 1){
clearInterval(obj.timer);
if(fn){
fn.call(obj);
}
} },13); function now(){
return (new Date()).getTime();
} } var Tween = {
linear: function (t, b, c, d){ //鍖€閫�
return c*t/d + b;
},
easeIn: function(t, b, c, d){ //鍔犻€熸洸绾�
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){ //鍑忛€熸洸绾�
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){ //鍔犻€熷噺閫熸洸绾�
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){ //鍔犲姞閫熸洸绾�
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){ //鍑忓噺閫熸洸绾�
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){ //鍔犲姞閫熷噺鍑忛€熸洸绾�
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){ //姝e鸡琛板噺鏇茬嚎锛堝脊鍔ㄦ笎鍏ワ級
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){ //姝e鸡澧炲己鏇茬嚎锛堝脊鍔ㄦ笎鍑猴級
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){ //鍥為€€鍔犻€燂紙鍥為€€娓愬叆锛�
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 3.70158; //鍥炵缉鐨勮窛绂�
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){ //寮圭悆鍑忔尟锛堝脊鐞冩笎鍑猴級
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
}
</script>

js 网上见到的动画函数 备份的更多相关文章

  1. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  2. js 封装一个均速动画函数

    //动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增 ...

  3. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  4. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  5. 原生JS实现动画函数的封装

    封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...

  6. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  7. js 变速动画函数

    //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...

  8. JS中的自执行函数

    本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...

  9. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

随机推荐

  1. hdu3709(数位dp)

    求区间[l,r]内有多少个数的满足:   选一个位为中点,是的左边的数到该位的距离等于右边的位到该位的距离. 比如4139  选择3位中点, 那么左边的距离是 4 * 2 + 1 * 1 , 右边的距 ...

  2. bootstrap在 刷新页面,tab选择页面不会改变。

    您可以直接复制代码 注意在同级别文件夹中引用 相应js 和 css. 实现tab影响 关键看bootstrap的 data-toggle= tab <html lang="en&quo ...

  3. Android学习笔记(四十):Preference使用

    Preference从字面上看偏好,译为首选项. 一些配置数据,一些我们上次点击选择的内容.我们希望在下次应用调起的时候依旧有效,无须用户再一次进行配置或选择.Android提供preference这 ...

  4. RedGate 工具SQLMultiScript1.1

    原文:RedGate 工具SQLMultiScript1.1 RedGate 工具SQLMultiScript1.1 SQLMultiScript是一个脚本分发工具,当你写好了一个SQL脚本之后,你需 ...

  5. 基础知识(2)- Java程序设计环境

    2.1 安装Java开发工具箱  2.1.1 下载JDK  2.1.2 设置执行路径  2.1.3 安装库源文件和文档  2.1.4 安装本书中的示例  2.1.5 导航Java目录 2.2 选择开发 ...

  6. Spring之AOP术语

    AOP是Aspect Oriented Programing的简称.被译为"面向切面编程". AOP独辟蹊径通过横向抽取机制为这类无法通过纵向继承体系进行抽象的反复性代码提供了解决 ...

  7. zoj 3288 Domination (可能dp)

    ///dp[i][j][k]代表i行j列件,并把一k的概率 ///dp[i][j][k]一种常见的方法有四种传输 ///1:dp[i-1][j][k-1] 可能 (n-(i-1))*j/(n*m-(k ...

  8. redmine使用汇总redmine软件工程过程

    1.强制性当一个新的问题:轨道.议题.叙述性说明.状态.优先.分配给.父任务(假设没有可以不填,假设有请务必填写).开始日期.预计时间.党羽,请注意,这时候一定不要填写完成时间 2.如果你想在实时登记 ...

  9. (转)mvn clean install 与 mvn install 的区别(为啥用clean)

    之前写代码的过程中曾经遇到过问题,用mvn install后,新改的内容不生效,一定要后来使用mvn clean install 才生效,由于之前没有做记录,以及记不清是什么情况下才会出现的问题,于是 ...

  10. 开源Math.NET基础数学类库使用(09)相关数论函数使用

    原文:[原创]开源Math.NET基础数学类库使用(09)相关数论函数使用               本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4 ...