在完成最后的这个move.js后，我将之前的顺序改变效果的代码改成了这样，但是只能完成第一个效果，是不是相当于已经实现了到目标，后面的就不执行了？怎么改呢？既能实现同步的也能实现不同步的？
Li.onmouseover = function(){
startMove(Li,{width:400},function(){
startMove(Li,{height:200},function(){
startMove(Li,{opacity:100});
});
});
}
2015-01-16
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>
区域中的？号注释块是我也不太明白的地方，望高手解答
举报
