本文实例讲述了JS运动特效之同时运动实现方法。分享给大家供大家参考,具体如下:
接着上一篇《JS运动特效之链式运动》继续折腾
上一篇中我们的运动框架,可以完美的实现让一个物体先变宽,在变高,在变透明度.....,看似很完美了!
貌似可以喝喝茶看看美女了。但是老板突然说,让你同时改变一个物体的宽高和透明度,心碎了一地! ! !
拿过之前的运动框架发现,无法实现让div同时又变宽,又变高,有变透明度! !最后无能为力,只好有请JSON大神出场了,不认识JSON的小伙伴们就找度娘问一下吧!
函数startMove (obj, attr, iTarget fn)
之前
之前的startMove()函数里都是传入一个attr属性,在传入一个iTarget目标值,但是我们有个JSON这个神器之后,我们可以把属性和目标值,一对对放在JSON里,然后再,
比如我们想要改变宽,高,透明度,那么就把他们放入JSON:{宽度:300,身高:300,不透明度:30}
然后用. .在遍历这个json就可以得到相应的属性和值了,那么在运动框架程序中该怎么修改那? ?
& lt; script>
var json={宽度:200,身高:300,不透明度:30};
(attr以json) {
alert("属性是:“+ attr +”——目标值”+ json [attr]);
}
& lt;/script>
之前
有上面的弹出结果可以看的出,json里的widht,高度,透明度就是对应的属性名字,200300年30对于的就是目标值,遍历这个json对象,可以看出attr就对应的是各个属性名,而json (attr]就对应各个目标值,看到这里应该就大概明白怎么修改了吧!
1。首先<代码>函数startMove (obj, attr, iTarget fn) 中attr, iTarget干掉,传入一个json对象
函数startMove (obj、json、fn)
之前
2。接着在定时器里遍历这个json看看都哪些属性需要变化
函数startMove (obj、json、fn) {//fn:执行下一个运动的函数
clearInterval (obj.timer);
obj。计时器=setInterval(函数(){
在json(关键){//霉丶嬷按氲氖粜?json (atrr)代替之前的目标值//也就是把之前startMove函数里的attr改写成键,iTarget改写成json (atrr)//但是为了方便虽好把在里的关键的名字直接改写成attr就好了,对(attr以json)这样就不要一个个去改写startMove里的attr,省的事
}
},30);
}
之前
HTML部分:
& lt; div id=" div1 "祝辞& lt;/div>
之前
css部分:
& lt; style>
# div1 {
宽度:200 px;高度:200 px;
背景:绿色;
}
& lt;/style>
之前
js部分:
& lt; script>
窗口。onload=function () {
var oDiv=. getelementbyid (“div1”);
oDiv。onmouseover=function () {
startMove (oDiv{宽度:300,身高:300,不透明度:30});
}
oDiv。onmouseout=function () {
startMove (oDiv{宽度:200,身高:200,不透明度:100});
}
}
函数getStyle (obj, attr) {
返回getComputedStyle & # 63;getComputedStyle (obj, false) [attr]: obj.currentStyle [attr);
}
函数startMove (obj、json、fn) {//json代替了原来的attr和iTarger参数
clearInterval (obj.timer);
obj。计时器=setInterval(函数(){
(attr以json) {
var objAttr=0;
如果(attr==安煌该鞫取?{//由于在里的名关键字是attr所以这里不用替换
objAttr=Math.round (parseFloat (getStyle (obj, attr)) * 100);
其他}{
objAttr=方法(getStyle (obj, attr));
}
var哲学=(json (attr] -objAttr)/10;//由之前的iTarget替换成了json (attr]
哲学=iSpeed> 0 & # 63; Math.ceil(哲学):Math.floor(哲学);
如果(objAttr==json (attr]) {
clearInterval (obj.timer);
如果(fn){//如果传了“下一个运动的函数”就执行
fn ();
}
其他}{
如果(attr==安煌该鞫取?{
obj.style。过滤器='α(不透明度:' + (objAttr +哲学)+ ')';
obj.style。不透明度=(objAttr +哲学)/100;
其他}{
obj。风格(attr]=objAttr +哲学+“px”;
}
}
}
},30);
}
& lt;/script>
