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

為什么圖形完全不動？

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

多物體同時運動的html文件

<!DOCTYPE?html>
<html?xmlns="http://">
<head>
????<meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"></meta>?????<!--?可讓中文正常顯示?-->
????<title>多物體同時運動，同時改變寬高透明度</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>

完美運動框架的js代碼：

????//完美運動框架,可同時變化
????function?startMove(obj,json,fn){?????
????????var?flag=true;??//假設(shè)所有的運動都到達(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.計算速度
????????????var?speed=(json[attr]-icur)/8;
????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????//3.監(jiān)測停止
????????????if?(icur!=json[attr])?{???//如果不是所有的運動都到達(dá)了終點
????????????????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];
????????}
????}