请高手添加JS的注释

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text ml; charset=utf-8">
<script>
function rand(min,max){
return Math.round(min+(Math.random()*(max-min)));
};var move = function(element, position, speed, callback){//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10
if(typeof(element)=='string')element=document.getElementById(element);
if(!element.effect){
element.effect = {};
element.effect.move=0;
}
clearInterval(element.effect.move);
var speed=speed||2;
var start=(function(elem){
var posi = {left:elem.offsetLeft, top:elem.offsetTop};
while(elem = elem.offsetParent){
posi.left += elem.offsetLeft;
posi.top += elem.offsetTop;
};
return posi;
})(element);
element.style.position = 'absolute';
var style = element.style;
var styleArr=[];
if(typeof(position.left)=='number')styleArr.push('left');
if(typeof(position.top)=='number')styleArr.push('top');
element.effect.move = setInterval(function(){
for(var i=0;i<styleArr.length;i++){
start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100;
style[styleArr[i]] = start[styleArr[i]] + 'px';
}
for(var i=0;i<styleArr.length;i++){
if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){
if(i!=styleArr.length-1)continue;
}else{
break;
}
for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = position[styleArr[i]] + 'px';
clearInterval(element.effect.move);
if(callback)callback.call(element); }
}, 20);
};
</script></head>
<body>
<div id="testDiv" style="position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;" onclick="alert(this.style.filter)">
<div style="background-color:#369; height:100%;"></div>
</div>
<br/>
 &#160;  动画测试 &#160;
<input type="button" value="移动位置" onClick="move('testDiv', {left:rand(40,600),top:rand(40,400)})" />
<input type="button" value="还原" 
onClick="var ele=document.getElementById('testDiv');clearInterval(ele.effect.move);clearInterval(ele.effect.fade);clearInterval(ele.effect.resize);ele.style.cssText='position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;'" />
</body>
< ml>

解决方案 »

  1.   

    所以css是布局，js的核心就是在单位时间内来控制移动
      

  2.   


    function rand(min,max){
    return Math.round(min+(Math.random()*(max-min)));
    };var move = function(element, position, speed, callback){//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10
    if(typeof(element)=='string')element=document.getElementById(element);
    if(!element.effect){
    element.effect = {};
    element.effect.move=0;
    }
    clearInterval(element.effect.move);
    var speed=speed||2;
    var start=(function(elem){
    var posi = {left:elem.offsetLeft, top:elem.offsetTop};
    while(elem = elem.offsetParent){
    posi.left += elem.offsetLeft;
    posi.top += elem.offsetTop;
    };
    return posi;
    })(element);
    element.style.position = 'absolute';
    var style = element.style;
    var styleArr=[];
    if(typeof(position.left)=='number')styleArr.push('left');
    if(typeof(position.top)=='number')styleArr.push('top');
    element.effect.move = setInterval(function(){
    for(var i=0;i<styleArr.length;i++){
    start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100;
    style[styleArr[i]] = start[styleArr[i]] + 'px';
    }
    for(var i=0;i<styleArr.length;i++){
    if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){
    if(i!=styleArr.length-1)continue;
    }else{
    break;
    }
    for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = position[styleArr[i]] + 'px';
    clearInterval(element.effect.move);
    if(callback)callback.call(element);}
    }, 20);
    };
    </script>
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text ml; charset=utf-8">
    <script>
    function rand(min,max){
    return Math.round(min+(Math.random()*(max-min)));
    };var move = function(element, position, speed, callback){//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10
    if(typeof(element)=='string')element=document.getElementById(element);
    if(!element.effect){
    element.effect = {};
    element.effect.move=0;
    }
    clearInterval(element.effect.move);
    var speed=speed||2;
    var start=(function(elem){
    var posi = {left:elem.offsetLeft, top:elem.offsetTop};
    while(elem = elem.offsetParent){
    posi.left += elem.offsetLeft;
    posi.top += elem.offsetTop;
    };
    return posi;
    })(element);
    element.style.position = 'absolute';
    var style = element.style;
    var styleArr=[];
    if(typeof(position.left)=='number')styleArr.push('left');
    if(typeof(position.top)=='number')styleArr.push('top');
    element.effect.move = setInterval(function(){
    for(var i=0;i<styleArr.length;i++){
    start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100;
    style[styleArr[i]] = start[styleArr[i]] + 'px';
    }
    for(var i=0;i<styleArr.length;i++){
    if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){
    if(i!=styleArr.length-1)continue;
    }else{
    break;
    }
    for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = position[styleArr[i]] + 'px';
    clearInterval(element.effect.move);
    if(callback)callback.call(element);}
    }, 20);
    };
    </script></head>
    <body>
    <div id="testDiv" style="position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;" onclick="alert(this.style.filter)">
    <div style="background-color:#369; height:100%;"></div>
    </div>
    <br/>
     &#160; 动画测试 &#160;
    <input type="button" value="移动位置" onClick="move('testDiv', {left:rand(40,600),top:rand(40,400)})" />
    <input type="button" value="还原"  
    onClick="var ele=document.getElementById('testDiv');clearInterval(ele.effect.move);clearInterval(ele.effect.fade);clearInterval(ele.effect.resize);ele.style.cssText='position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;'" />
    </body>
    < ml>