Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
window: is an object, refers to the browser object
Direct example: console.log (this) => window
this point
1, if the function is pointed to by events, this time directed at the process, this refers to the previous event element
2, if it is a normal function call, this time at this point in the process refers to the window
3, this refers to the timer inside the window object
4, during the function call, understand the function performed by the way, who is in front of the point, this point is who
ps: this refers to the object in front of the function call
Change this point
1、call()
函数.call(参数1，参数2，……)
参数一：this指代的对象
其他为实参
用法：function fn(){
console.log(1);
}
var box=document.querySelected('.box');
fn.call(box)传什么参，this就是指向的什么
2, apply (), only two parameters
参数一：this指代的对象
参数二：实参数组，实参集合
3, ES6 new method to change this point of
bind (this refers to an object) (argument)
A motion function package #
1, action: animation elements are moved up in
2 parameters: EL: moving element
attr: which has a style animation
target: destination
time: Time
type: the type of exercise
fn: function, the timer call
callback: callback function to call when the timer is turned off
js file:
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){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;
}
};
/*
书写一个运动的函数
作用 ：元素移动起来有动画效果
参数 ：
el : 运动的元素
attr : 哪一个样式有动画效果
target : 目标位置
time : 运动时间
type : 运动的方式
fn : 是一个函数，在定时器里面，调用
callback : 是一个函数，在关闭定时器时，调用函数,回调函数
*/
function move(el,attr,target,time,type,fn,callback){
var t = 0;
var b = parseFloat(getCSS(el,attr)); // 初始值
var c = target - parseFloat(getCSS(el,attr)); // 当前值与目标值之间的插值
var d = time/20; // 定时器的次数
var timer = null;
timer = setInterval(function(){
t++;
var reslut = Tween[type](t,b,c,d);
if(attr == 'opacity'){
el.style[attr] = reslut;
}else{
el.style[attr] = reslut + 'px';
}
if(typeof fn == 'function'){
fn()
}
if(t>=d){
// 关闭定时器
clearInterval(timer);
if(typeof callback == 'function'){
callback()
}
}
},20);
}
function getCSS(obj,attr){
if(obj.currentStyle){
// ie
return obj.currentStyle[attr]
}else{
// 谷歌
return getComputedStyle(obj)[attr];
}
}
Front-end call
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/otween.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
width:100px;
height: 100px;
background: #ADFF2F;
margin-top: 30px;
position: relative;
left:0;
}
</style>
</head>
<body>
<button type="button">点击</button>
<button type="button">停止</button>
<div class="box"></div>
<script type="text/javascript">
var box=document.querySelector('.box');
var btn=document.querySelectorAll('button');
var num=0;
var timer=null;
btn[0].onclick=function(){
// timer=setInterval(function(){
// num+=3;
// box.style.left=num+'px';
// },30)
move(box,'left',837,2000,'elasticIn');
}
// btn[1].onclick=function(){
// clearInterval(timer);
// }
</script>
</body>
</html>