在最后完成move.js后，之前的不同步的效果不能用這個實現了呢？
在完成最后的這個move.js后，我將之前的順序改變效果的代碼改成了這樣，但是只能完成第一個效果，是不是相當于已經實現了到目標，后面的就不執行了？怎么改呢？既能實現同步的也能實現不同步的？
Li.onmouseover = function(){
startMove(Li,{width:400},function(){
startMove(Li,{height:200},function(){
startMove(Li,{opacity:100});
});
});
}
2015-04-11
startMove(Li,{"width":400},function(){?????????這里的width要加雙引號。。。
2015-02-15
function moveStart(obj, json, fn) {
//json = {name:value}
//json要用for in 函數--->for(var i in json){ name==i; ?value == json[i] }
var flag = true; //假設所有運動都達到目標值
clearInterval(obj.timer);
// var aLi = document.getElementsByTagName("li");
//obj是實參傳來的this，所以這里不再需要獲取對象
obj.timer = setInterval(function() {
//1、獲取值
for (var attr in json) {
var icren = 0;
if (attr == "opacity") {
icren = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icren = parseInt(getStyle(obj, attr));
} //2、計算速度
var speed = (json[attr] - icren) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3、判斷是否達到目標
if (icren != json[attr]) {
// alert(flag);
flag = false;
// clearInterval(obj.timer);
}
else{
flag = true;
// alert(flag);
}
//for in 循環執行json時，是將json的屬性全部遍歷結束之后跳出循環
//4、執行計算
if (attr == "opacity") {
obj.style[attr] = (icren + speed) / 100;
obj.style[filter] = "alpha(opacity:" + (icren + speed) + ")";
} else {
obj.style[attr] = icren + speed + "px";
}
}
if (flag) {
alert("ok");
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
這樣就可以使用function（）{}了，但是要是你傳入的obj的實參是this，function中不可以再傳入this，最好把this賦值給變量。以下是代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
width: 200px;
height: 100px;
background-color: goldenrod;
opacity: 0.3;
border: 2px solid black;
}
</style>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var oLi = document.getElementsByTagName("li");
// alert(oLi.length);
for(var i = 0;i<oLi.length;i++){
// alert("test");
oLi[i].timer = null;
oLi[i].onmouseover = function(){
var test = this;
moveStart(test,{width:202,height:200}
// ?==========?
// ?= moveStar(this,...)中，this不可以用oLi[i]這個對象？？？？=
// ?==========?
,function(){
moveStart(test,{opacity:100});
}
);
}
oLi[i].onmouseout = function(){
moveStart(this,{width:200,height:100});
}
}
}
</script>
</head>
<body>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
</html>
區域中的？號注釋塊是我也不太明白的地方，望高手解答
2015-02-15
是的，我也發現了，正在分析，是由于flag一直是false，無法進入最后的判斷，對json了解不是很透徹。
2015-01-29
遇到同樣問題 求指教
2015-01-16
呵呵 學習了