首页新闻找找看学习计划

求解答一个小小的js库

1
悬赏园豆:100 [已解决问题] 解决于 2012-12-14 10:23
//这是个运动库miaov.js,有请能比较具体的解释下下面的代码,小弟无材大部份不能理解

function css(obj, attr, value){
    if(arguments.length==2)//这是是什么,上面的函数不是三个参数都指定要写的吗,为什么现在要判断这些
    return parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
    else if(arguments.length==3)
        switch(attr){
            case 'width':
            case 'height':
            case 'paddingLeft':
            case 'paddingTop':
            case 'paddingRight':
            case 'paddingBottom':
            value=Math.max(value,0);//这个东西还不能删除,删除了不运动了,求解
            case 'left':
            case 'top':
            case 'marginLeft':
            case 'marginTop':
            case 'marginRight':
            case 'marginBottom':
            obj.style[attr]=value+'px';
            break;
            case 'opacity':
            obj.style.filter="alpha(opacity:"+value*100+")";
            obj.style.opacity=value;
            break;
            default:
            obj.style[attr]=value;
        }
    return function (attr_in, value_in){//这个有大虾说是递归,我不明白这个是什么意义
        css(obj, attr_in, value_in)
    };
}

var MIAOV_MOVE_TYPE={
    BUFFER: 1,
    FLEX: 2
};

function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring){//这五个参数,后面两个有什么作用(回调,回调的意义是什么)
    var fnMove=null;
    if(obj.timer){clearInterval(obj.timer);}
    
    switch(iType){
        case MIAOV_MOVE_TYPE.BUFFER:
            fnMove=miaovDoMoveBuffer;
            break;
        case MIAOV_MOVE_TYPE.FLEX:
            fnMove=miaovDoMoveFlex;
            break;
    }
    
    obj.timer=setInterval(function (){
        fnMove(obj, oTarget, fnCallBack, fnDuring);
    }, 15);
}

function miaovDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring){//这个运动的方式能不能说下
    var bStop=true;
    var attr='';
    var speed=0;
    var cur=0;
    
    for(attr in oTarget){
        cur=css(obj, attr);
        if(oTarget[attr]!=cur){
            bStop=false;
            speed=(oTarget[attr]-cur)/5;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            css(obj, attr, cur+speed);
        }
    }
    
    if(fnDuring)fnDuring.call(obj);
    
    if(bStop){
        clearInterval(obj.timer);
        obj.timer=null;
        if(fnCallBack)fnCallBack.call(obj);
    }
}

function miaovDoMoveFlex(obj, oTarget, fnCallBack, fnDuring){
    var bStop=true;
    var attr='';
    var speed=0;
    var cur=0;
    
    for(attr in oTarget){
        if(!obj.oSpeed)obj.oSpeed={};
        if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
        cur=css(obj, attr);
        if(Math.abs(oTarget[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1){
            bStop=false;
            obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
            obj.oSpeed[attr]*=0.7;
            var maxSpeed=65;
            if(Math.abs(obj.oSpeed[attr])>maxSpeed){
                obj.oSpeed[attr]=obj.oSpeed[attr]>0?maxSpeed:-maxSpeed;
            }
            
            css(obj, attr, cur+obj.oSpeed[attr]);
        }
    }
    
    if(fnDuring)fnDuring.call(obj);
    
    if(bStop){
        clearInterval(obj.timer);
        obj.timer=null;
        if(fnCallBack)fnCallBack.call(obj);
    }
}

//下面是实现运动效果的js
<script type="text/javascript" src="miaov.js"></script>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    var i=0;
    for(i=0;i<aEle.length;i++){
        if(aEle[i].className==sClass){aResult.push(aEle[i]);}
    }
    return aResult;
}

window.onload=function (){
    var oDiv=document.getElementById('div1');
    var aLi=getByClass(oDiv, 'miaov_box_head')[0].getElementsByTagName('li');
    var aBtn=getByClass(oDiv, 'miaov_box_foot')[0].getElementsByTagName('a');
    var oCaret=getByClass(oDiv, 'caret')[0];
    var aPos=[];
    var timer=null;
    var i=0;
    
    for(i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aPos[i]=aLi[i].offsetLeft;
    }
    for(i=0;i<aLi.length;i++){
        aLi[i].style.position='absolute';
        aLi[i].style.left=aPos[i]+'px';
    }
    
    aBtn[0].onclick=function (){
        var i=aLi.length-1;
        clearTimeout(timer);
        function next(){
            var obj=aLi[i];
            if(i>=aLi.length/2){
                miaovStartMove(aLi[i], {left: 900}, MIAOV_MOVE_TYPE.FLEX);
                timer=setTimeout(next, 100);
                i--;
            }else{
                timer=setTimeout(next2, 200);
            }
        }
        
        function next2(){
            if(i>=0){
                miaovStartMove(aLi[i], {left: aPos[i]}, MIAOV_MOVE_TYPE.FLEX);
                timer=setTimeout(next2, 100);
            }
            i--;
        }
        next();
        aBtn[1].className='';
        this.className='show';
        miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);
    };
    
    aBtn[1].onclick=function (){
        var i=0;
        clearTimeout(timer);
        function next(){
            var obj=aLi[i];
            if(i<=aLi.length/2-1){
                miaovStartMove(aLi[i], {left: -200}, MIAOV_MOVE_TYPE.FLEX);
                timer=setTimeout(next, 100);
                i++;
            }else{
                timer=setTimeout(next2, 200);
            }
        }
        
        function next2(){
            if(i<aLi.length){
                miaovStartMove(aLi[i], {left: aPos[i-aLi.length/2]}, MIAOV_MOVE_TYPE.FLEX);
                timer=setTimeout(next2, 100);
            }
            i++;
        }
        next();
        aBtn[0].className='';
        this.className='show';
        miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);
    };
};
</script>

<style type="text/css">
*{margin:0;padding:0;}
body{background:#EBEBED;_position:relative;_height:100%;}
img{border:none;display:block;}
li{list-style:none;}
.page{
    -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
    box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
    background:#FFFFFF;
    border-color: #E5E5E5 #DBDBDB #D2D2D2;
    border-style: solid;
    border-width: 1px;
    margin:5px auto 0;
    width:980px;
}
.miaov_box{
    overflow:hidden;
    position: relative;
    width: 820px;
    z-index: 0;
    height:158px;
    margin: 0 70px;
}
.miaov_box_head{
    width: 1680px;    
}
.miaov_box_head li{
    width:140px;
    float:left;
    text-align: center;
}
a{
    text-decoration:none;
    font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
    color:#7F7F7F;
}
.miaov_box_head li a:hover{color:#333;}
.miaov_box_foot{
    height:30px;
    text-align:center;
    background:#fff;
    overflow:hidden;
    background:url(img/nav_bg.png) no-repeat 0 0;
    background:-moz-linear-gradient(center bottom, rgba(223,223,223,1) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 90%, rgba(230,230,230,1) 93%, rgba(190,190,190,1) 96%, rgba(150,150,150,1) 100%);
    background:-webkit-gradient(linear, left bottom, left top, from(rgba(223,223,223,1)), color-stop(66%, rgba(242,242,242,1)), color-stop(90%, rgba(242,242,242,1)), color-stop(93%, rgba(230,230,230,1)), color-stop(96%, rgba(210,210,210,1)), to(rgba(140,140,140,1)));
    border-bottom:1px solid #ebebeb;
    position:relative;
}
.caret{
    background: url(img/caret_active.gif) no-repeat scroll 0 0;
    display: block;
    height: 8px;
    margin: 0 0 -8px -7px;
    position: absolute;
    width: 15px;
}
.miaov_box_foot a{
     display: inline-block;
    margin: 0 15px;
    padding: 8px 0 6px;
    cursor:pointer;
    text-shadow: 0 1px 0 #FFFFFF;
}
.miaov_box_foot .show{
    cursor: default;
    color:#2B2B2B;    
}
.miaov_box_foot a:hover{color:#000;}
.miaov{height:36px;line-height:26px;text-align:center;position:fixed;_position:absolute;bottom:0;width:100%;}
.miaov a{color:#777;font-size:16px;}
.miaov a:hover{color:#555;}
.miaov_head{height:36px;width:980px;overflow:hidden;margin:0 auto;}
.miaov_head .left{float:left;}
.miaov_head .right{float:right;}
.miaov_head a{line-height:36px;color:#777;}
.miaov_head a:hover{color:#555;}
</style>
<div id="div1" class="page"> <div class="miaov_box"> <ul class="miaov_box_head"> <li><a href="http://www.miaov.com"><img src="img/1.jpg" alt=""/>iPod shuffle</a></li> <li><a href="http://www.miaov.com"><img src="img/2.jpg" alt=""/>iPod nano</a></li> <li><a href="http://www.miaov.com"><img src="img/3.jpg" alt=""/>iPod classic</a></li> <li><a href="http://www.miaov.com"><img src="img/4.jpg" alt=""/>iPod touch</a></li> <li><a href="http://www.miaov.com"><img src="img/5.jpg" alt=""/>Apple TV</a></li> <li><a href="http://www.miaov.com"><img src="img/6.jpg" alt=""/>Accessories</a></li> <li><a href="http://www.miaov.com"><img src="img/7.jpg" alt=""/>Download iTunes 10</a></li> <li><a href="http://www.miaov.com"><img src="img/8.jpg" alt=""/>iTunes Gift Cards</a></li> <li><a href="http://www.miaov.com"><img src="img/9.jpg" alt=""/>Nike + iPod</a></li> <li><a href="http://www.miaov.com"><img src="img/10.jpg" alt=""/>(PRODUCT) RED</a></li> <li><a href="http://www.miaov.com"><img src="img/11.jpg" alt=""/>MobileMe</a></li> <li><a href="http://www.miaov.com"><img src="img/12.jpg" alt=""/>In-Ear Headphones</a></li> </ul> </div> <div class="miaov_box_foot"> <span style="left: 424px;" class="caret"></span> <a class="show">Products</a> <a>iTunes and more</a> </div> </div>
严文Live2012的主页 严文Live2012 | 初学一级 | 园豆:36
提问于:2012-12-04 12:08
< >
分享
最佳答案
0

   这个问题已没人解答了,不好意思要解除掉了

收获园豆:100
严文Live | 初学一级 |园豆:11 | 2012-12-14 10:22
其他回答(5)
0

把相关联的文件发我邮箱吧:hongtenzone@foxmail.com 希望可以帮你搞定..

Hongten | 园豆:1768 (小虾三级) | 2012-12-04 12:47

我已经发了,谢谢你,谢查收

支持(0) 反对(0) 严文Live2012 | 园豆:36 (初学一级) | 2012-12-04 13:36

  大虾你什么时候有空噻,我一直在等呢

支持(0) 反对(0) 严文Live2012 | 园豆:36 (初学一级) | 2012-12-05 10:35

@严文Live2012: 嘿嘿,昨天在公司的时候,我看了一下deom,并且运行起来看了,感觉不错,写了一部分注释主要是apple.html文件中的js注释,在js文件中的注释还没来得及写...抱歉...我尽快写完注释,把它贴出来,让大家指正...

支持(0) 反对(0) Hongten | 园豆:1768 (小虾三级) | 2012-12-05 11:10

@Hongten:好的,您慢写

支持(0) 反对(0) 严文Live2012 | 园豆:36 (初学一级) | 2012-12-05 13:39

@严文Live2012: 

运行的效果类似于:http://www.apple.com/mac/

maov.css

 1 *{margin:0;padding:0;}
 2 body{background:#EBEBED;_position:relative;_height:100%;}
 3 img{border:none;display:block;}
 4 li{list-style:none;}
 5 .page{
 6     -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
 7     -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
 8     box-shadow: rgba(0,0,0,0.3) 0 1px 3px; 
 9     background:#FFFFFF;
10     border-color: #E5E5E5 #DBDBDB #D2D2D2;
11     border-style: solid;
12     border-width: 1px;
13     margin:5px auto 0;
14     width:980px;
15 }
16 .miaov_box{
17     overflow:hidden;
18     position: relative;
19     width: 820px;
20     z-index: 0;
21     height:158px;
22     margin: 0 70px;
23 }
24 .miaov_box_head{
25     width: 1680px;    
26 }
27 .miaov_box_head li{
28     width:140px; 
29     float:left;
30     text-align: center;
31 }
32 a{
33     text-decoration:none;
34     font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
35     color:#7F7F7F;
36 }
37 .miaov_box_head li a:hover{color:#333;}
38 .miaov_box_foot{
39     height:30px; 
40     text-align:center; 
41     background:#fff; 
42     overflow:hidden;
43     background:url(img/nav_bg.png) no-repeat 0 0;
44     background:-moz-linear-gradient(center bottom, rgba(223,223,223,1) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 90%, rgba(230,230,230,1) 93%, rgba(190,190,190,1) 96%, rgba(150,150,150,1) 100%);
45     background:-webkit-gradient(linear, left bottom, left top, from(rgba(223,223,223,1)), color-stop(66%, rgba(242,242,242,1)), color-stop(90%, rgba(242,242,242,1)), color-stop(93%, rgba(230,230,230,1)), color-stop(96%, rgba(210,210,210,1)), to(rgba(140,140,140,1)));
46     border-bottom:1px solid #ebebeb;
47     position:relative;
48 }
49 .caret{
50     background: url(img/caret_active.gif) no-repeat scroll 0 0;
51     display: block;
52     height: 8px;
53     margin: 0 0 -8px -7px;
54     position: absolute;
55     width: 15px;
56 }
57 .miaov_box_foot a{
58      display: inline-block;
59     margin: 0 15px;
60     padding: 8px 0 6px;
61     cursor:pointer;
62     text-shadow: 0 1px 0 #FFFFFF;
63 }
64 .miaov_box_foot .show{
65     cursor: default;
66     color:#2B2B2B;    
67 }
68 .miaov_box_foot a:hover{color:#000;}
69 .miaov{height:36px;line-height:26px;text-align:center;position:fixed;_position:absolute;bottom:0;width:100%;}
70 .miaov a{color:#777;font-size:16px;}
71 .miaov a:hover{color:#555;}
72 .miaov_head{height:36px;width:980px;overflow:hidden;margin:0 auto;}
73 .miaov_head .left{float:left;}
74 .miaov_head .right{float:right;}
75 .miaov_head a{line-height:36px;color:#777;}
76 .miaov_head a:hover{color:#555;}

 

apple.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <link rel="stylesheet" href="miaov.css"/>
  7 <script type="text/javascript" src="miaov.js"></script>
  8 <script type="text/javascript">
  9 function getByClass(oParent, sClass)
 10 {
 11     var aEle=oParent.getElementsByTagName('*');
 12     var aResult=[];
 13     var i=0;
 14     
 15     for(i=0;i<aEle.length;i++)
 16     {
 17         if(aEle[i].className==sClass)
 18         {
 19             aResult.push(aEle[i]);
 20         }
 21     }
 22     
 23     return aResult;
 24 }
 25 
 26 window.onload=function ()
 27 {
 28     //这里获取<div id="div1" class="page">的div
 29     var oDiv=document.getElementById('div1');
 30     //获取class为miaov_box_head的所有li元素的数组
 31     var aLi=getByClass(oDiv, 'miaov_box_head')[0].getElementsByTagName('li');
 32     //这里是获取miaov_box_head的所有a元素的数组
 33     var aBtn=getByClass(oDiv, 'miaov_box_foot')[0].getElementsByTagName('a');
 34     //这里获取caret元素值,用户标记下面的Products和iTunes and more
 35     var oCaret=getByClass(oDiv, 'caret')[0];
 36     var aPos=[];
 37     var timer=null;
 38     var i=0;
 39     //这里把miaov_box_head的所有li元素做offsetLeft操作
 40     for(i=0;i<aLi.length;i++)
 41     {
 42         aLi[i].index=i;
 43         aPos[i]=aLi[i].offsetLeft;
 44     }
 45     //这里对miaov_box_head的所有li元素进行位置调整
 46     for(i=0;i<aLi.length;i++)
 47     {
 48         aLi[i].style.position='absolute';
 49         aLi[i].style.left=aPos[i]+'px';
 50     }
 51     
 52     aBtn[0].onclick=function ()
 53     {
 54         var i=aLi.length-1;
 55         
 56         clearTimeout(timer);
 57         
 58         function next()
 59         {
 60             var obj=aLi[i];
 61             if(i>=aLi.length/2)
 62             {
 63                 miaovStartMove(aLi[i], {left: 900}, MIAOV_MOVE_TYPE.FLEX);
 64                 timer=setTimeout(next, 100);
 65                 i--;
 66             }
 67             else
 68             {
 69                 timer=setTimeout(next2, 200);
 70             }
 71         }
 72         
 73         function next2()
 74         {
 75             if(i>=0)
 76             {
 77                 miaovStartMove(aLi[i], {left: aPos[i]}, MIAOV_MOVE_TYPE.FLEX);
 78                 timer=setTimeout(next2, 100);
 79             }
 80             i--;
 81         }
 82         
 83         next();
 84         
 85         aBtn[1].className='';
 86         this.className='show';
 87         miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);
 88     };
 89     
 90     aBtn[1].onclick=function ()
 91     {
 92         var i=0;
 93         
 94         clearTimeout(timer);
 95         
 96         function next()
 97         {
 98             var obj=aLi[i];
 99             if(i<=aLi.length/2-1)
100             {
101                 miaovStartMove(aLi[i], {left: -200}, MIAOV_MOVE_TYPE.FLEX);
102                 timer=setTimeout(next, 100);
103                 i++;
104             }
105             else
106             {
107                 timer=setTimeout(next2, 200);
108             }
109         }
110         
111         function next2()
112         {
113             if(i<aLi.length)
114             {
115                 miaovStartMove(aLi[i], {left: aPos[i-aLi.length/2]}, MIAOV_MOVE_TYPE.FLEX);
116                 timer=setTimeout(next2, 100);
117             }
118             i++;
119         }
120         
121         next();
122         
123         aBtn[0].className='';
124         this.className='show';
125         miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);
126     };
127 };
128 </script>
129 </head>
130 
131 <body>
132 <div class='miaov_head'>
133     <a href="http://www.miaov.com" target="_blank" class='left'>妙味课堂 http://www.miaov.com</a>
134     <a href="http://www.miaov.com/contact.html.php" target="_blank" class='right'>联系我们</a>
135 </div>
136 <div id="div1" class="page">
137     <div class="miaov_box">
138             <ul class="miaov_box_head">
139                 <li><a href="http://www.miaov.com"><img src="img/1.jpg" alt=""/>iPod shuffle</a></li>
140                 <li><a href="http://www.miaov.com"><img src="img/2.jpg" alt=""/>iPod nano</a></li>
141                 <li><a href="http://www.miaov.com"><img src="img/3.jpg" alt=""/>iPod classic</a></li>
142                 <li><a href="http://www.miaov.com"><img src="img/4.jpg" alt=""/>iPod touch</a></li>
143                 <li><a href="http://www.miaov.com"><img src="img/5.jpg" alt=""/>Apple TV</a></li>
144                 <li><a href="http://www.miaov.com"><img src="img/6.jpg" alt=""/>Accessories</a></li>
145                 <li><a href="http://www.miaov.com"><img src="img/7.jpg" alt=""/>Download iTunes 10</a></li>
146                 <li><a href="http://www.miaov.com"><img src="img/8.jpg" alt=""/>iTunes Gift Cards</a></li>
147                 <li><a href="http://www.miaov.com"><img src="img/9.jpg" alt=""/>Nike + iPod</a></li>
148                 <li><a href="http://www.miaov.com"><img src="img/10.jpg" alt=""/>(PRODUCT) RED</a></li>
149                 <li><a href="http://www.miaov.com"><img src="img/11.jpg" alt=""/>MobileMe</a></li>
150                 <li><a href="http://www.miaov.com"><img src="img/12.jpg" alt=""/>In-Ear Headphones</a></li>
151             </ul>
152     </div>
153     <div class="miaov_box_foot">
154         <span style="left: 424px;" class="caret"></span>
155         <a class="show">Products</a>
156         <a>iTunes and more</a>
157     </div>
158 </div>
159 </body>
160 </html>

 

支持(0) 反对(0) Hongten | 园豆:1768 (小虾三级) | 2012-12-06 00:02

@严文Live2012: 还有maov.js文件正在研究..

支持(0) 反对(0) Hongten | 园豆:1768 (小虾三级) | 2012-12-06 00:11

@Hongten: apple.html 的js我能看懂,就是maov.js库里的东西我不懂,请大虾能详解下这个运动库的代码,谢谢谢谢了

支持(0) 反对(0) 严文Live2012 | 园豆:36 (初学一级) | 2012-12-06 08:53

@Hongten: 

 大虾这个库你看懂没,什么时候贴出来让我看下
支持(0) 反对(0) 严文Live2012 | 园豆:36 (初学一级) | 2012-12-10 08:41
0

好长的代码,看的有点晕

jerry-Tom | 园豆:4077 (老鸟四级) | 2012-12-04 14:02
0

function css(){}这个函数有三个参数,如果只传2个就是获取值的意思。传三个则是设置值。

value=Math.max(value,0); 这句应该是相当于 value ||0 吧。

 

return function (attr_in, value_in){
        css(obj, attr_in, value_in)
    };

这只是返回函数,里面调用了自己来设置值。

function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring){ } 从字面的意思应该是回调和运行过程所用的时间

 fnMove(obj, oTarget, fnCallBack, fnDuring);JS中函数也是对象

if(fnDuring)fnDuring.call(obj);  一般call是用来改变thisObj的。

 

 

e.e.p | 园豆:215 (菜鸟二级) | 2012-12-04 14:19
0
//最后希望大虾能讲下这个运动库的实现原理
function css(obj, attr, value){
    if(arguments.length==2) //这里如果是前两个函数就执行下面的这断,有必要吗  (有必要,如果参数不全,后面的代码执行就会出错undifind)
    return parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
    else if(arguments.length==3)
        switch(attr){
            case 'width':
            case 'height':
            value=Math.max(value,0);//这里为什么突然要加个这东西,去掉了还不行,这个value是什么东西来的
            //返回数个数值中较大的值,给value具体干嘛也不太清楚,结果实际应用应该知道,value是上面的参数
            case 'left':
            case 'top':
            obj.style[attr]=value+'px';
            break;
            case 'opacity':
            obj.style.filter="alpha(opacity:"+value*100+")";
            obj.style.opacity=value;
            break;
            default:
            obj.style[attr]=value;
        }
    return function (attr_in, value_in){//这个返回的是attr和value但下面的css(*,*,*)这样写的原因是什么,
        css(obj, attr_in, value_in)//这里是一个递归调用
    };
}

var MIAOV_MOVE_TYPE={
    BUFFER: 1,
    FLEX: 2
};
//fnCallBack这是回调函数
//fnDuring这也是一个回调函数,但是他是在执行动画的过程中使用的
function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring){//这里有五个参数后面那两个是什么东西来的,有什么作用,
    var fnMove=null;
    if(obj.timer){clearInterval(obj.timer);}
    
    switch(iType){
        case MIAOV_MOVE_TYPE.BUFFER:
            fnMove=miaovDoMoveBuffer;
            break;
        case MIAOV_MOVE_TYPE.FLEX:
            fnMove=miaovDoMoveFlex;
            break;
    }
    
    obj.timer=setInterval(function (){
        fnMove(obj, oTarget, fnCallBack, fnDuring);//这里fnMove不是个对象吗,怎么下面这里又变成了函数了
        //则会是一个任意类型的变量,当赋值给它函数的时候,他就是这个函数,在这里 fnMove=miaovDoMoveBuffer;赋值的
    }, 15);
}

function miaovDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring){
    var bStop=true;
    var attr='';
    var speed=0;
    var cur=0;
    
    for(attr in oTarget){
        cur=css(obj, attr);
        if(oTarget[attr]!=cur){
            bStop=false;
            speed=(oTarget[attr]-cur)/5;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            css(obj, attr, cur+speed);
        }
    }
    
    if(fnDuring)fnDuring.call(obj);//这是什么意思----判断fnDuring参数是否是一个函数,如果是调用执行这个函数
    
    if(bStop){
        clearInterval(obj.timer);
        obj.timer=null;
        if(fnCallBack)fnCallBack.call(obj);
    }
}

function miaovDoMoveFlex(obj, oTarget, fnCallBack, fnDuring){
    var bStop=true;
    var attr='';
    var speed=0;
    var cur=0;
    
    for(attr in oTarget){
        if(!obj.oSpeed)obj.oSpeed={};
        if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
        cur=css(obj, attr);
        if(Math.abs(oTarget[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1){
            bStop=false;
            obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
            obj.oSpeed[attr]*=0.7;
            var maxSpeed=65;
            if(Math.abs(obj.oSpeed[attr])>maxSpeed){
                obj.oSpeed[attr]=obj.oSpeed[attr]>0?maxSpeed:-maxSpeed;
            }
            
            css(obj, attr, cur+obj.oSpeed[attr]);
        }
    }
    
    if(fnDuring)fnDuring.call(obj);
    
    if(bStop){
        clearInterval(obj.timer);
        obj.timer=null;
        if(fnCallBack)fnCallBack.call(obj);
    }
}

对着上面的看吧,应该已经很明白了

az235 | 园豆:8263 (大侠五级) | 2012-12-04 18:57

css()方法确实不好理解,不知道作者在表达什么。

表面上看,可以这样调用:

var myObj = document.getElementById('MyDiv');
css.(myObj,'width',100)('height',200)('height',300)('height',400)

即所谓链式调用。

实际调用时,只能连调一次。后面的就断了。

如果修改下则可。

function css(obj,attr,value){
    ...
    ...
    return function(attr_in,value_in){
        return css(obj,attr_in,value_in)
    }
}

 

不过,全文中也没看见这样的调用。也不知道作者是什么意图。

支持(0) 反对(0) tp3cd | 园豆:409 (菜鸟二级) | 2012-12-06 10:45

@tp3cd: 这样就好理解了,你想想元素的style属性,css方法就是去修改这个东西的

至于他的写法你可以这样理解css(目标元素,样式属性,样式值),这是一个递归调用方法

支持(0) 反对(0) az235 | 园豆:8263 (大侠五级) | 2012-12-06 10:49

@az235: 我指的是return这个语句。

css(obj,attr,value)这是一个动作,不返回,可以。

css(obj,attr,value),返回一个2参数方法,也可以,对同一个obj不用重复写obj参数,这个也好。

css(obj,attr,value)返回一个2参数方法,但只能使用一次,这个不好理解。

我猜它写错了。:)

支持(0) 反对(0) tp3cd | 园豆:409 (菜鸟二级) | 2012-12-06 22:18
这也是递归吗,怎么一点都不像

 

@az235: 

支持(0) 反对(0) 严文Live2012 | 园豆:36 (初学一级) | 2012-12-07 10:51

@严文Live2012: 这个是我看错了,这不是递归

支持(0) 反对(0) az235 | 园豆:8263 (大侠五级) | 2012-12-07 12:09
0

m

tp3cd | 园豆:409 (菜鸟二级) | 2012-12-07 23:08
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册