一个简单的例子,通过本地js实现jQuery函数动画()动画效果
部分注释是用来测试的,而且编写代码的过程不是很顺利,因为js通常使用得不是很精细,一般都是知道方法,也是用的,但是直到实时动画实现错误的功能时,所有的小细节都可能被难住。
函数中有几个参数来解释它。
Obj,一个函数对象
JSON在{属性:值的数值形式,属性:值},,这里是运动属性对象的动画
间隔,每次执行更改间隔时,对象都是属性值。
sp,值转换的速度,使得动画具有缓冲效应,而不仅仅是恒定速度(sp 1)。
FN、回调函数、动画执行后的行为
代码很简单,只需注意几个细节,这里提醒一下:
一个对象的属性没有被宣布直接,所以这个函数的第一句话是这样(obj。定时器);它不犯错误。
我们必须为每个对象添加一个计时器,否则它将相互影响。一个定时器的共同使用的结果是多个对象卡顿的运动。
儿子的数据格式明白,当对象的动画属性走过,你需要长!{是} = JSON来确定每个属性已经达到目标值。旗帜的作用是防止clearInterval(obj。定时器)从清理计时器时,其中一个属性达到目标值,和其他动画属性没有达到目标值。所以当我们遍历每个时间,我们初始化的标志值为true。只要我们遇到一个没有达到目标属性的目标,我们就将标志设置为false,直到对象的所有属性到达目标值并清除计时器为止。
速度=速度> 0 math.ceil(速度):Math.floor(速度);
这句话是属性值舍入的作用,因为除了不透明度外,没有十进制属性值。
最后,在调用时要注意动画对象。当你使用for循环,你不能随意使用ARR {我}的形式。特别是当嵌套循环时,i的值成为最大值。
js
动画函数(obj,JSON,间隔,SP,FN){
ClearInterval(obj。定时器);
0;
var j = 0;
功能getstyle(obj,ARR){
如果(obj。currentstyle){
返回的对象。currentstyle {是}; / / IE
{人}
返回document.defaultview.getcomputedstyle(obj,null){是};
}
}
obj.timer = setInterval(){()函数(
;
var标志=真;
对于(VAR ARR JSON){
VaR长= 0;
;
如果(ARR = =不透明度){
长= math.round(parseFloat(getstyle(obj,ARR))* 100);
{人}
长= parseInt(getstyle(obj,ARR));
}
速度=(JSON { ARR } -长)×SP;
速度=速度> 0 math.ceil(速度):Math.floor(速度);
如果(长!= { }){ JSON数组
标志=假;
}
如果(ARR = =不透明度){
obj.style.filter =α(透明度(长+速度):' + ');
obj.style.opacity =(长+速度) / 100;
{ }人
obj。风格{ ARR } =长+速度+PX;
}
/ / console.log(J +
}
如果(标志){
ClearInterval(obj。定时器);
/ / console.log(J +:+标志);
/ / console.log(k+ K);
/ / console.log(=+ J);
/ / console.log(做);
如果(FN){
(FN);
}
}
},区间);
}
调用模式:
无功动= document.getelementbyid(移动),GetElementsByTagName(李);
对于(var i = 0;i < move.length;i++){
移动{我}。onmouseover =函数(){
无功_this =这;
动画(_this,{宽度:500,高度:200 },10,0.01,函数()){
动画(_this,{宽度:300,高度:200 },10,0.01);
});
}
}
上述原生js实现了一个简单的例子,jQuery的动画函数()的动画效果,这是所有萧边分享你的内容。我希望能给你一个参考,我希望你会得到很多支持。