为什么实现不了和老师一样的效果,各位大神,求助

来源:7-1 JS动画案例

慕粉18144024425

2017-01-11 20:46

window.onload=function(){

var div=document.getElementById('move'),

a=div.getElementsByTagName('a');

for(var i=0;i<a.length;i++){

a[i].onmouseover=function(){

var _this=this.getElementsByTagName('img')[0];

startmove(_this,{top:-25,opacity:0},function(){

_this.style.top=30+'px';

startmove(_this,{top:25,opacity:1});

})

}

}

}





function getstyle(obj,attr){

if (obj.currentStyle) {

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

}

//startmove(obj,{attr1:target1,attr2:target2}):同时传入多个属性与属性值

function startmove(obj,json,fn){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var flag=true;//假设所有的运动都到达目标值

for(var attr in json){

//取当前值

var icur=0;


if (attr=='opacity') {

icur=Math.round(parseFloat(getstyle(obj,attr))*100);

}else{

icur=parseInt(getstyle(obj,attr));

}

//算速度

var speed=(json[attr]-icur)/8;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

//检测停止

//某一个属性到达目标值之后就会清除定时器,这时候如果其中有一个属性比较快到达目标值时,那么就会触发清除定时器,导致其它的属性还没有到达目标值,就被迫停止了。所以得让所有得属性到达目标值时才能关闭定时器

if (icur!=json[attr]) {

flag=false;

}

//如果属性是透明度的话要用if另做判断,因为透明度没有单位,和其他属性不一样

if (attr=='opacity') {

obj.style.filter='alpha(opacity:'+(icur+speed)+')';

obj.style.opacity=(icur+speed)/100;

}else{

obj.style[attr]=icur+speed+'px';

}

}

//如果所有的运动都到达目标值,那么就触发触发清除定时器,如果有外加函数,那么就再执行外加函数fn()

if (flag==true) {

clearInterval(obj.timer);

//如果有外加函数,就执行

if (fn) {

fn();

}

}

},30)

}



实现不了效果会是我结构上的问题吗?求大神帮忙看下,谢谢!

写回答 关注

3回答

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题