标签：box tps code type var this over class upload
运动，其实就是在一段时间内改变 left 、 right 、 width 、 height 、 opactiy 的值，到达目的地之后停止
top,leftwidth,heightopacitysetIntervalsetTimeout|
1
2
3
|
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
|
|
1
|
<div id="box"></div>
|
|
1
2
3
4
5
6
7
|
#box {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 0;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
var box = document.getElementById("box");
var speed = 0; //步长
var target = 600;
var timer = null;
timer = setInterval(function(){
var curr = parseInt(getStyle(box,"left")); //去除getStyle(box,"left")的单位
if(curr == target){
clearInterval(timer);
speed = 0;
alert("运动结束");
}else{
speed +=10;
box.style.left = speed + "px";
}
},1000/30);
//监控left的值的变化 怎么样拿到left的值
//alert(getComputedStyle(box)["width"]);
//alert(box.currentStyle["left"]);
// currentStyle --IE
// getComputedStyle -- 非IE
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
|
|
1
|
<div id="ball"></div>
|
|
1
2
3
4
5
|
#ball {
width: 100px;
height: 100px;
background: blue;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
var ball = document.getElementById("ball");
ball.onmouseover = function(){
//同时变换 用的最多
//move(this,"width",500,10);
//move(this,"height",500,10);
move(ball,{"width":400,"height":300},10);
}
ball.onmouseout = function(){
//move(this,"width",100,-10);
//move(this,"height",100,-10);
move(ball,{"width":100,"height":100},-10);
}
function move(obj,json,speed){
clearInterval(obj.timer);
var mark = true;
obj.timer = setInterval(function(){
for(var attr in json){
var curr = parseInt(getStyle(obj,attr));
var target = json[attr];
if(curr != target){
obj.style[attr] = curr+speed+"px";
mark = false;
}
}
if(mark){
clearInterval(obj.timer);
}
},1000/30);
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
|
|
1
|
<div id="ball"></div>
|
|
1
2
3
4
5
6
7
8
9
|
#ball {
position: relative;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: blue;
opacity: 1;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
var ball = document.getElementById("ball");
ball.onmouseover = function(){
move(ball,{"width":300,"height":300,"opacity":0.3});
}
// ball.onmouseout = function(){
// move(ball,{"width":100,"height":100},-10);
// }
function move(obj,json){
clearInterval(obj.timer);
var mark = true;
obj.timer = setInterval(function(){
for(var attr in json){
var curr = null;
var target = json[attr];
var speed = null;
if(attr == "opacity"){
curr = getStyle(obj,attr)*100;
speed = (target*100-curr)*0.15;
}else {
curr = parseInt(getStyle(obj,attr));
speed = (target - curr)*0.15;
}
speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
if(curr != target){
if(attr == "opacity"){
obj.style[attr] = (curr+speed)/100;
}else {
obj.style[attr] = curr+speed+"px";
}
mark = false;
}
}
if(mark){
clearInterval(obj.timer);
}
},1000/30);
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
|
speed不要写死|
1
2
3
4
|
<div id="ball"></div>
<div id="box1">
<div id="box2">分享到</div>
</div>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
var box1 = document.getElementById("box1");
var ball = document.getElementById("ball");
box1.onmouseover = function(){
move(this,"left",0,10);
}
box1.onmouseout = function(){
move(this,"left",-100,-10);
}
//问题一：当需要两个动画的时候，会执行后面一个，解决办法如下，回调函数
ball.onmouseover = function(){
//同时变换 用的最多
//move(this,"width",500,10);
//move(this,"height",500,10);
//列队在执行
move(ball,"width",500,10,function(){
move(ball,"height",500,10);
});
}
ball.onmouseout = function(){
//move(this,"width",100,-10);
//move(this,"height",100,-10);
move(ball,"width",100,-10,function(){
move(ball,"height",100,-10);
});
}
var timer = null;
function move(obj,attr,target,speed,callback){
clearInterval(timer); //obj.timer缓存到各自的obj下
timer = setInterval(function(){
var curr = parseInt(getStyle(obj,attr));
if(curr == target){
clearInterval(timer);
callback && callback();
}else {
obj.style[attr] = curr+speed+"px";
}
},1000/30);
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<div id="box">
<ul id="imgBox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol id="btn">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script src="http://7xq6al.com1.z0.glb.clouddn.com/Animate.min.js"></script>
<script type="text/javascript">
var box = document.querySelector("#box");
var imgUl = document.querySelector("#imgBox");
var btns = document.querySelector("#btn").querySelectorAll("li");
var len = btns.length;
var lenImg = imgUl.querySelectorAll("li").length;
var index = 0; //控制img的索引
var cindex = 0;//控制按钮的索引
var timer = null;
for (var i=0;i<len;i++) {
(function(index){
btns[index].onmouseover = function(){
for (var j=0;j<len;j++){
btns[j].className = "";
}
cindex = index;//保持索引同步
animateSpeed(imgUl,{"left":-970*index});
this.className = "active";
}
})(i);
}
function autoPlay(){
index++;
cindex++;
cindex %=len;//限制长度
for (var j=0;j<len;j++){
btns[j].className = "";
}
animateSpeed(imgUl,{"left":-970*index},function(){
if(index == lenImg-1){
this.style.left = 0;
index = 0;
}
});
btns[cindex].className = "active";
}
timer = setInterval(autoPlay,2000);
box.onmouseover = function(){
clearInterval(timer);
}
box.onmouseout = function(){
timer = setInterval(autoPlay,2000);
}
</script>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
*{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
font-family: "微软雅黑";
}
ul,li{
list-style: none;
}
#box {
position: relative;
width: 970px;
height: 350px;
margin: 30px auto;
overflow: hidden;
}
#imgBox {
width:1000%;/*自动计算百分比*/
position: absolute;
left: 0;
}
#imgBox li{
width: 970px;
height: 350px;
float: left;
}
#imgBox li img {
width: 970px;
height: 350px;
}
#btn {
width: 120px;
position: absolute;
right: 10px;
bottom: 10px;
}
#btn li {
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #fff;
margin: 0 2px;
float: left;
}
#btn li.active {
background: #F17A5C;
color: #fff;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
//速度版本
(function(win){
function move(obj,json,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var mark = true;
for(var attr in json){
var cur = null;
if(attr == "opacity"){
cur = getStyle(obj,attr)*100;
}else{
//如果没写 默认填充成0
cur = parseInt(getStyle(obj,attr))||0;
}
var target = json[attr];
var speed = (target - cur)*0.2;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur != target){
if(attr == "opacity"){
//IE opacity兼容问题
obj.style.filter = "alpha(opacity="+(cur+speed)+")";
obj.style[attr] = (cur + speed)/100;
}else{
obj.style[attr] = cur + speed + "px";
}
mark = false;
};
}
if(mark){
clearInterval(obj.timer);
callback && callback.call(obj);
}
},1000/30);
}
win.animateSpeed = move;
})(window);
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
function getId(id){
return document.getElementById(id);
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<script type="text/javascript">
//时间版本
getId("box2").onclick = function(){
animateTime(getId("box2"),{
"left":500,
"opacity":100
},1000,"elasticOut",function(){
this.innerHTML = "我是时间版本";
});
}
getId("box3").onclick = function(){
animateTime(getId("box3"),{
"left":500,
"opacity":100
},1000,"backIn",function(){
this.innerHTML = "我是时间版本";
});
}
getId("box4").onclick = function(){
animateTime(getId("box4"),{
"left":500,
"opacity":100
},1000,"bounceIn",function(){
this.innerHTML = "我是时间版本";
});
}
getId("box5").onclick = function(){
animateTime(getId("box5"),{
"left":500,
"opacity":100
},1000,"bounceBoth",function(){
this.innerHTML = "我是时间版本";
});
}
</script>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#box1,#box2,#box3,#box4,#box5 {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: red;
color: #fff;
font-size: 12px;
opacity: 0.5;
filter:alpha(opcity=20);/**兼容IE*/
margin: 10px;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
/*t b c d
t current time :nTime-sTime
b begining time :curr
c chang in value :变化量end-curr
d duration :持续时间 time */
/**
*
* @param {Object} obj 元素对象
* @param {Object} json 多个属性
* @param {Object} time 变化时间
* @param {Object} prop 运动函数
* @param {Object} callback 回调函数
*/
//时间版本
(function(win){
function move(obj,json,time,prop,callback){
//一般定时器结束后最好清除
clearInterval(obj.timer);
var curr = {};
var end = {};
//通过for in 在上车前把所有东西装到包里
for(var attr in json){
if(attr == "opacity"){//opacity特殊东西特殊对待
curr[attr] = getStyle(obj,attr)*100;//化为整数好计算
}else{
curr[attr] = parseInt(getStyle(obj,attr))||0;
}
end[attr] = json[attr];
}
//如果没写默认值 默认就是0 不然在IE出问题
//var curr = parseInt(getStyle(obj,attr))||0;
//var end = target;
var sTime = new Date();//开始时间T0
//开始变换了
obj.timer = setInterval(function(){
var nTime = new Date();//当前时间Tt
var t = nTime -sTime;
var d = time;
//St = (Tt-T0)/Time*(S-S0)+S0
//(nTime-sTime)/time 比例最多为1
/*var prop = (nTime-sTime)/time; */
if(t >=d){
t = d;
clearInterval(obj.timer);
callback && callback.call(obj);
}
for(var attr in json){
var b = curr[attr];
var c = end[attr] - b;
if(attr == "opacity"){
//var s = prop*(end[attr]-curr[attr])+curr[attr];
var s = Tween[prop](t,b,c,d);
obj.style[attr] = s/100;
obj.style.filter = "alpha(opacity="+s+")";
}else{
//var s = prop*(end[attr]-curr[attr])+curr[attr];
var s = Tween[prop](t,b,c,d);
obj.style[attr] = s+"px";
}
}
},13);
var Tween = {
linear: function (t, b, c, d){ //匀速
return c*t/d + b; // t/d = prop;
},
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){ //正弦衰减曲线（弹动渐入）
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){ //正弦增强曲线（弹动渐出）
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;
}
};
}
win.animateTime = move;
})(window);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
|
/*t b c d
t current time :nTime-sTime
b begining time :curr
c chang in value :变化量end-curr
d duration :持续时间 time */
/**
*
* @param {Object} obj 元素对象
* @param {Object} json 多个属性
* @param {Object} time 变化时间
* @param {Object} prop 运动函数
* @param {Object} callback 回调函数
*/
//时间版本
(function(win){
function move(obj,json,time,prop,callback){
//一般定时器结束后最好清除
clearInterval(obj.timer);
var curr = {};
var end = {};
//通过for in 在上车前把所有东西装到包里
for(var attr in json){
if(attr == "opacity"){//opacity特殊东西特殊对待
curr[attr] = getStyle(obj,attr)*100;//化为整数好计算
}else{
curr[attr] = parseInt(getStyle(obj,attr))||0;
}
end[attr] = json[attr];
}
//如果没写默认值 默认就是0 不然在IE出问题
//var curr = parseInt(getStyle(obj,attr))||0;
//var end = target;
var sTime = new Date();//开始时间T0
//开始变换了
obj.timer = setInterval(function(){
var nTime = new Date();//当前时间Tt
var t = nTime -sTime;
var d = time;
//St = (Tt-T0)/Time*(S-S0)+S0
//(nTime-sTime)/time 比例最多为1
/*var prop = (nTime-sTime)/time; */
if(t >=d){
t = d;
clearInterval(obj.timer);
callback && callback.call(obj);
}
for(var attr in json){
var b = curr[attr];
var c = end[attr] - b;
if(attr == "opacity"){
//var s = prop*(end[attr]-curr[attr])+curr[attr];
var s = Tween[prop](t,b,c,d);
obj.style[attr] = s/100;
obj.style.filter = "alpha(opacity="+s+")";
}else{
//var s = prop*(end[attr]-curr[attr])+curr[attr];
var s = Tween[prop](t,b,c,d);
obj.style[attr] = s+"px";
}
}
},13);
var Tween = {
linear: function (t, b, c, d){ //匀速
return c*t/d + b; // t/d = prop;
},
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){ //正弦衰减曲线（弹动渐入）
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){ //正弦增强曲线（弹动渐出）
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;
}
};
}
win.animateTime = move;
})(window);
//速度版本
(function(win){
function move(obj,json,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var mark = true;
for(var attr in json){
var cur = null;
if(attr == "opacity"){
cur = getStyle(obj,attr)*100;
}else{
//如果没写 默认填充成0
cur = parseInt(getStyle(obj,attr))||0;
}
var target = json[attr];
var speed = (target - cur)*0.2;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur != target){
if(attr == "opacity"){
//IE opacity兼容问题
obj.style.filter = "alpha(opacity="+(cur+speed)+")";
obj.style[attr] = (cur + speed)/100;
}else{
obj.style[attr] = cur + speed + "px";
}
mark = false;
};
}
if(mark){
clearInterval(obj.timer);
callback && callback.call(obj);
}
},1000/30);
}
win.animateSpeed = move;
})(window);
function getStyle(obj,attr){
return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
function getId(id){
return document.getElementById(id);
}
|
from：http://blog.poetries.top/2017/01/12/js-animate/?utm_source=tuicool&utm_medium=referral
标签：box tps code type var this over class upload
原文地址：http://www.cnblogs.com/neil080320/p/6279268.html
