<small id="evrlg"><button id="evrlg"></button></small>
<small id="evrlg"></small>
課程
/前端開發
/JavaScript
/JS動畫效果
回調函數不執行是為什么啊
2016-12-10
源自：JS動畫效果 5-1
正在回答
<html xmlns="http://www.w3.org/1999/xhtml"> ? ?
<head> ? ?
<meta charset="UTF-8"/> ? ?
<meta name="Generator" content="EditPlus?"/> ? ?
<meta name="Author" content=""/> ? ?
<meta name="Keywords" content=""/> ? ?
<meta name="Description" content=""/> ? ?
<title>Document</title> ? ?
<style type="text/css"> ? ?
/* css默認樣式重置 */ ? ?
body,p,h1,h2,h3,ul,li{margin:0;padding:0;font-size:12px;} ? ?
ul{list-style:none;} ? ?
a{text-decoration:none;} ? ?
img{border:none;vertical-align:top;} ? ?
li{width:200px;height:100px;background:yellow;margin-bottom:20px;border:4px solid black;filter:alpha(opacity:30);opacity:0.3;} ? ?
</style> ? ?
<script type="text/javascript"> ? ?
window.onload=function(){ ? ?
var Li=document.getElementById("li1"); ? ?
Li.onmouseover=function(){ ? ?
startMove(Li,"width",400,function(){ ? ?
startMove(Li,"height",200,function(){ ? ?
startMove(Li,"opacity",100);}); ? ?
}); ? ?
} ? ?
Li.onmouseout=function(){ ? ?
startMove(Li,"opacity",30,function(){ ? ?
startMove(Li,"height",100,function(){ ? ?
startMove(Li,"width",200);}); ? ?
function startMove(obj,att,iTarget,fn){ ? ?
clearInterval(obj.timer); ? ?
obj.timer=setInterval(function(){ ? ?
var icur=0; ? ?
if(att=="opacity"){ ? ?
icur=Math.round(parseFloat(getStyle(obj,att))*100); ? ?
}else{ ? ?
icur=parseInt(getStyle(obj,att)); ? ?
var speed=(iTarget-icur)/8; ? ?
speed=speed>0?Math.ceil(speed):Math.floor(speed); ? ?
if(obj.icur==iTarget){ ? ?
fn && fn();//回調函數 ? ?
obj.style.filter="alpha(opacity:"+(icur+speed)+")"; ? ?
obj.style.opacity=(icur+speed)/100; ? ?
obj.style[att]=icur+speed+"px";} ? ?
},30); ? ?
function getStyle(obj, attr){ ? ?
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; ? ?
</script> ? ?
</head> ? ?
<body> ? ?
<ul> ? ?
<li id="li1"></li> ? ?
</ul> ? ?
</body> ? ?
</html> ? ?
你在startMove函數里面做過對回調函數的定義么？把代碼貼出來看下
舉報
通過本課程JS動畫的學習，從簡單動畫開始，逐步深入各種動畫框架封裝
1 回答回調函數的執行環境？
1 回答求助：為啥只能執行單個運動，不能執行鏈式運動
1 回答為什么在這段代碼中還要用回調函數啊，回調函數難道不是是用來實現鏈式運動的？
1 回答鼠標移入后，第一個動畫執行完了，回調函數不執行
2 回答無法執行鏈式運動，還報錯了
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-12-10
<html xmlns="http://www.w3.org/1999/xhtml"> ? ?
<head> ? ?
<meta charset="UTF-8"/> ? ?
<meta name="Generator" content="EditPlus?"/> ? ?
<meta name="Author" content=""/> ? ?
<meta name="Keywords" content=""/> ? ?
<meta name="Description" content=""/> ? ?
<title>Document</title> ? ?
<style type="text/css"> ? ?
/* css默認樣式重置 */ ? ?
body,p,h1,h2,h3,ul,li{margin:0;padding:0;font-size:12px;} ? ?
ul{list-style:none;} ? ?
a{text-decoration:none;} ? ?
img{border:none;vertical-align:top;} ? ?
li{width:200px;height:100px;background:yellow;margin-bottom:20px;border:4px solid black;filter:alpha(opacity:30);opacity:0.3;} ? ?
</style> ? ?
<script type="text/javascript"> ? ?
window.onload=function(){ ? ?
var Li=document.getElementById("li1"); ? ?
Li.onmouseover=function(){ ? ?
startMove(Li,"width",400,function(){ ? ?
startMove(Li,"height",200,function(){ ? ?
startMove(Li,"opacity",100);}); ? ?
}); ? ?
} ? ?
Li.onmouseout=function(){ ? ?
startMove(Li,"opacity",30,function(){ ? ?
startMove(Li,"height",100,function(){ ? ?
startMove(Li,"width",200);}); ? ?
}); ? ?
} ? ?
function startMove(obj,att,iTarget,fn){ ? ?
clearInterval(obj.timer); ? ?
obj.timer=setInterval(function(){ ? ?
var icur=0; ? ?
if(att=="opacity"){ ? ?
icur=Math.round(parseFloat(getStyle(obj,att))*100); ? ?
}else{ ? ?
icur=parseInt(getStyle(obj,att)); ? ?
} ? ?
var speed=(iTarget-icur)/8; ? ?
speed=speed>0?Math.ceil(speed):Math.floor(speed); ? ?
if(obj.icur==iTarget){ ? ?
clearInterval(obj.timer); ? ?
fn && fn();//回調函數 ? ?
}else{ ? ?
if(att=="opacity"){ ? ?
obj.style.filter="alpha(opacity:"+(icur+speed)+")"; ? ?
obj.style.opacity=(icur+speed)/100; ? ?
}else{ ? ?
obj.style[att]=icur+speed+"px";} ? ?
} ? ?
},30); ? ?
} ? ?
function getStyle(obj, attr){ ? ?
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; ? ?
} ? ?
} ? ?
</script> ? ?
</head> ? ?
<body> ? ?
<ul> ? ?
<li id="li1"></li> ? ?
</ul> ? ?
</body> ? ?
</html> ? ?
2016-12-10
你在startMove函數里面做過對回調函數的定義么？把代碼貼出來看下