<!--HTML-->
<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title>自定義運動框架08-鏈式運動(函數(shù)傳參)</title>
????????<style?type="text/css">
????????????*{margin:?0;padding:?0;list-style:?none;}
????????????ul?li{
????????????????width:?200px;
????????????????height:?100px;
????????????????background:?#FF7F50;
????????????????border:?1px?solid?black;
????????????}
????????</style>
????????<script?type="text/javascript"?src="js/starMove.js"></script>
????????<script?type="text/javascript">
????????????window.onload=function(){
????????????????var?oli=document.getElementById("li1");
????????????????oli.onmouseover=function(){
????????????????????starMove(oli,{width:400},function(){
????????????????????????starMove(oli,{height:200},function(){
????????????????????????????starMove(oli,{opacity:30})
????????????????????????});
????????????????????});
????????????????};
????????????????oli.onmouseout=function(){
????????????????????starMove(oli,"opacity",100,function(){
????????????????????????starMove(oli,"height",100,function(){
????????????????????????????starMove(oli,"width",200)
????????????????????????});
????????????????????});
????????????????};
????????????};
????????</script>
????</head>
????<body>
????????<ul>
????????????<li?id="li1"></li>
????????</ul>
????</body>
</html>
<!--JS-->
/*框架*/
function?starMove(obj,json,fn){
????
????var?flag=true;//假設(shè)所有對象都到達了目標值
????
????clearInterval(obj.timer);//清除定時器
????obj.timer=setInterval(function(){
????????for(var?attr?in?json){
????????
????????//兼容判斷
????????var?icur=0;
????????if?(attr=="opacity")?{
????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100);
????????????//parseInt(getStyle(obj,attr));
????????}?else{
????????????icur=parseInt(getStyle(obj,attr));
????????};
????????//var?icur=parseInt(getStyle(obj,attr));//此處不兼容透明度
????????var?t=20;
????????var?speed=(json[attr]-icur)/t;
????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????if?(icur!=json[attr])?{
????????????flag=false;
????????};
????????????//clearInterval(obj.timer);
????????????//if(fn){fn();};
????????//}?else{
????????????//執(zhí)行判斷：處理單位不兼容透明度問題
????????if?(attr=="opacity")?{
????????????obj.style.filter="alpha(opacity:"+(icur+speed)+")";//IE
????????????obj.style.opacity=(icur+speed)/100;
????????}?else{
????????????obj.style[attr]=icur+speed+"px";//單位不兼容透明度
????????};
????????//};
????????
????????if(flag){
????????????clearInterval(obj.timer);
????????????if(fn){
????????????????fn();
????????????};
????????};
????????};
????},30);
};
2016-11-22
if?(icur?!=?json[attr])?{ ????flag?=?false; }else?{ ????flag?=?true; }改成這樣吧，小白好理解一點。
2016-11-09
順便說下，你的那個鼠標移除的函數(shù)調(diào)用的傳參有點問題，應該改成下面這樣：
?oli.onmouseout=function(){ ???????????????????????????????starMove(oli,{opacity:100},function(){ ???????????????????????????????????starMove(oli,{height:100},function(){ ???????????????????????????????????????starMove(oli,{width:200}) ???????????????????????????????????}); ???????????????????????????????}); ???????????????????????????};2016-11-09
老師寫的那個運動框架中判斷運動停止的那句語句有問題：
?if?(icur!=json[attr])?{ ????????????flag=false; ????????};你把它改成下面這樣就可以了：
由于javascript是從上到下執(zhí)行的，老師寫的那個判斷是指：如果屬性沒有執(zhí)行完成，那么就將flag設(shè)置為false，
可是當所有的屬性執(zhí)行完成后又沒有將flag的值重置為true；
可是那個回調(diào)函數(shù)（鏈式運動）的判斷條件是flag為true，所以鏈式運動無法執(zhí)行。而重新將移入鼠標后，flag被設(shè)置為true了，而屬性已經(jīng)完成，沒有被設(shè)置為false，所以就執(zhí)行鏈式運動了。