能幫我看一下代碼嗎，我就是將老師最后講完的完美框架想課后再試一試鏈式動畫和多物體動畫，發現都會出現問題啊
問題1
如題，不能鼠標移入一次就可以先寬再高再透明度，而是需要分別移入三次，誰能幫我看一下啊，痛苦了好久，謝謝拉?。?！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
? #div1{
? margin-bottom:10px;
? width: 100px;
? height:100px;
? background: yellow;
? border: 5px solid #000;
? opacity: 0.3;
? border-radius: 10px;
?}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("div1");
odiv.onmouseover=function(){
startmove(odiv,{width:200},function(){
startmove(odiv,{height:200},function(){
startmove(odiv,{opacity:100});
});
});
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
問題2
同一個文件中，我又寫了以下代碼，還是發現有問題，這是怎么回事呢
var obj1=document.getElementById("obj1");
var oli=document.getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
oli[i].onmouseover=function(){
startmove(this,{width:400});
}
}
2014-11-28
第一個問題，你看你的標桿設置在什么地方了？一進來就假定所有的運動都到達了目標值，那肯定你執行一次就停止了。應該是在啟動定時器之后設置。
2014-11-28
你的這個代碼報這個錯Uncaught SyntaxError: Unexpected end of input是你代碼寫的不規范，其中的某條語句，沒有正常結束或者部分語句“‘’”雙引號，單引號沒有配對好，被轉義了之類的錯誤造成的
看到紅色的{}了嗎，你少了結尾的},好好對比一下你的代碼就會知道。
ps:今后再遇到類似的錯誤，如果不知道什么意思，可以百度一下。。
謝謝。
2014-11-27
老師，想同時控制一個ul中的li動畫，我還是出錯的，代碼如下圖，您能幫忙看一下嗎，這次調試的結果截圖也附上來，我檢查了半天沒有查出來不規范的地方。。。自己是一名新手，希望老師您可以抽空看一下，謝謝老師
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="en"> <head> <meta?http-equiv="Content-Type"?content="text/html;charset=UTF-8"> <title>!!!final-test</title> <style?type="text/css"> ?body{ ??margin:10px; ??padding:0px; ??background:?#eee; ?} ?ul{ ??list-style:?none; ??margin:0px; ??padding:?0px; ?} ?li{ ??margin:0px?10px?10px?0px; ?} ?#obj1?li{ ??width:?200px; ??height:?100px; ???background:?blue; ???border:?5px?solid?#000; ???opacity:0.3; ???border-radius:?10px; ?} </style> <script?type="text/javascript"?src="move.js"></script> <script?type="text/javascript"> window.onload=function(){ var?obj1=document.getElementById("obj1"); var?oli=document.getElementsByTagName('li'); for?(var?i?=?0;?i?<?oli.length;?i++)?{ oli[i].onmouseover=function(){ startmove(this,{width:400}); }; } </script> </head> <body> <ul?id="obj1"> <li></li> <li></li> <li></li> </ul> </body> </html>2014-11-27
//獲取樣式函數,如果是在內聯樣式中，可以直接通過style屬性獲取樣式，但是如果是在外部定義的css，則需要getstyle獲取樣式的屬性 function?getstyle(obj,attr){ //針對ie瀏覽器 if(obj.currentStyle){ return?obj.currentStyle[attr]; } //針對firefox以及chrome瀏覽器 else{ return?getComputedStyle(obj,false)[attr]; } } //startmove(obj,{attr1:itarget1,?attr2:itarget2},fn) //json可方便調用多個屬性樣式，可以同時做多個動畫 function?startmove(obj,json,fn){ var?flag=true;//設立一個標桿，假設所有的運動都到達了目標值 clearInterval(obj.timer);//為了防止控制多個物體時出現錯誤，將timer指定為各自的對象 //開啟定時器 obj.timer=setInterval(function(){ //遍歷json的屬性 for(var?attr?in?json){ //取當前的值 var?icur=0; if?(attr=='opacity')?{ icur=Math.round(parseFloat(getstyle(obj,attr))*100); //getstyle()只是獲取了樣式屬性，但只是一個字符串，不能直接參與運算，所以需要將其變為parsefloat解析為小數，為避免小數運算產生的錯誤，要將其四舍五入，同時先乘以100，最后再除以100得到結果 } else{ icur=parseInt(getstyle(obj,attr)); } //算速度 //itarget換為json[attr],是哪個屬性，就換為json哪個屬性的目標值 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.opacity=(icur+speed)/100; } else{ obj.style[attr]=icur+speed+'px'; }???//這一種和上一行的寫法都是ok的 }//針對的是json的函數遍歷 if?(flag)?{ clearInterval(obj.timer); if(fn){ fn(); } }; },30) }我把您的這段代碼試過了還是移入一次一個屬性變化一次。F12調試的時候也沒有報錯，這是我的move.js部分，老師您能抽空看一下嗎
2014-11-27
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>Document</title> <style?type="text/css"> ??#div1{ ??margin-bottom:10px; ??width:?100px; ??height:100px; ??background:?yellow; ??border:?5px?solid?#000; ??opacity:?0.3; ??border-radius:?10px; ?} </style> <script?src="js/move.js"></script> <script?type="text/javascript"> window.onload=function(){ var?odiv=document.getElementById("div1"); odiv.onmouseover=function(){ startMove(odiv,{width:200},function(){ startMove(odiv,{height:200},function(){ startMove(odiv,{opacity:100}); }); }); } } </script> </head> <body> <div?id="div1"></div> </body> </html>按照你的代碼，我運行了一遍，沒有問題，是先變寬再變高，最后變透明的。。只需鼠標移入一次。。你按F12查看一下是否報錯，報什么錯，有什么提示。。