                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫(huà)效果

為什么圖形完全不動(dòng)？

按照視頻課程打的代碼，但是發(fā)現(xiàn)圖形并不會(huì)動(dòng)，求助大神！在這先感謝您費(fèi)眼看我這代碼了。

多物體同時(shí)運(yùn)動(dòng)的html文件

<!DOCTYPE?html>
<html?xmlns="http://">
<head>
????<meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"></meta>?????<!--?可讓中文正常顯示?-->
????<title>多物體同時(shí)運(yùn)動(dòng)，同時(shí)改變寬高透明度</title>
????<link?href="css/main.css"?rel="stylesheet"?/>
????<style?type="text/css">
???????ul,li?{
???????	list-style:?none;
???????}
???????ul?li{
???????	width:?200px;
???????	height:?100px;
???????	background:?yellow;
???????	margin-bottom:?20px;
????????border:?2px?solid?red;
????????filter:alpha(opacity:30);
????????opacity:?0.3;
???????}

????</style>
????
????<script?src="js/perfectmove.js"></script>???
????<script>
????window.onload=function(){
????????var?ali=document.getElementById('li1');
????????ali.onmouseover=function(){
????????????startMove(ali,{width:400,height:200,opacity:100});??????
????????}
????????ali.onmouseout=function(){
??????????startMove(ali,{width:200,height:100,opacity:30});
????????????}
????</script>
</head>

<body>
<ul>
	<li?id="li1"></li>
</ul>
</body>
</html>

完美運(yùn)動(dòng)框架的js代碼：

????//完美運(yùn)動(dòng)框架,可同時(shí)變化
????function?startMove(obj,json,fn){?????
????????var?flag=true;??//假設(shè)所有的運(yùn)動(dòng)都到達(dá)了目標(biāo)值
????????clearInterval(obj.timer);??
????????obj.timer=setInterval(function(){
????????????for(var?attr?in?json){
????????????//1.取當(dāng)前的值
????????????var?icur=0;
????????????if?(attr=='opacity')?{????????????????????
????????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100);?
????????????}
????????????else{
????????????????icur=parseInt(getStyle(obj,attr));????
????????????}
????????????//2.計(jì)算速度
????????????var?speed=(json[attr]-icur)/8;
????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????//3.監(jiān)測(cè)停止
????????????if?(icur!=json[attr])?{???//如果不是所有的運(yùn)動(dòng)都到達(dá)了終點(diǎn)
????????????????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)?{
????????????????clearInterval(obj.timer);
????????????????if(fn)
????????????????{
????????????????????fn();
????????????????}
????????????}
????????},30)
????}

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