                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

用運動框架應(yīng)用鏈?zhǔn)竭\動出現(xiàn)的錯誤

function?start(obj,json,fn){
????clearInterval(obj.timer);
????obj.timer=setInterval(function(){
????????var?flag=true;
????????for(var?attr?in?json){
????????????//取當(dāng)前值
????????????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(attr=='opacity'){
????????????????obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
????????????????obj.style.opacity=(iCur+speed)/100;
????????????}else{
????????????????obj.style[attr]=iCur+speed+'px';
????????????}
????????}
????????if(flag==true){
????????????clearInterval(obj.timer);
????????}
????????if(fn){
????????????fn();
????????}
????},30)
}

function?getStyle(obj,attr){
????if(obj.currentStyle){
????????return?obj.currentStyle[attr];
????}else{
????????return?getComputedStyle(obj,false)[attr];
????}
}

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>鏈?zhǔn)竭\動</title>
? ?<style>
*{margin: 0;padding: 0}

? ? ? ?ul,li{list-style: none;}
? ? ? ?ul li{position:absolute;left:0px;width: 200px;height:100px;background: yellow;margin-bottom: 20px;border: 3px solid #1e90ff;filter: alpha(opacity:30);opacity: .3;}
? ?</style>
? ?<script src="animation.js"></script>
? ?<script>
window.onload=function(){
? ? ? ? ? ?var li=document.getElementById('li');

li.onmouseover=function(){

? ? ? ? ? ? ? ?start(li,{left:100},function(){
? ? ? ? ? ? ? ? ? ?start(li,{width:400},function(){
? ? ? ? ? ? ? ? ? ? ? ?start(li,{height:200},function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ?start(li,{opacity:100})
? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?})
? ? ? ? ? ?};

li.onmouseout=function(){

? ? ? ? ? ? ? ?start(li,{opacity:30},function(){
? ? ? ? ? ? ? ? ? ?start(li,{height:100},function(){
? ? ? ? ? ? ? ? ? ? ? ?start(li,{width:200},function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ?start(li,{left:0})
? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?})
? ? ? ? ? ?};
}
? ?</script>
</head>
<body>
? ?<ul>
? ? ? ?<li id="li"></li>
? ?</ul>
</body>
</html>