div逐步变化 ie和ff却不一样 郁闷!~

我觉得应该的结果是 当点了div后(鼠标不要动),最后div会消失在鼠标点的位置
ie下是这样的  ff下却莫名的多了一些出来了   感觉计算的过程好象也没有错误(只是感觉呀)
各位大虾指教下吧........
<body style="margin:0px; padding:0px;">
<div id='ss' style="height:300px; width:400px; border:1px solid #999999; position:absolute; left:50px; top:50px;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id='ssss'>wer</div><br>
<div id='sss'>wer</div><br>
<div id='sssss'>wer</div>
<script>
var time = null;
var step = 50;
var i =0;
var tatol=[];
function $(Id){return document.getElementById(Id)};
var CurrentStyle = function(element){
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
 };
$('ss').onclick =function(event){
var e = event||window.event;
tatol = [CurrentStyle(this).left,CurrentStyle(this).top,parseInt(CurrentStyle(this).width),parseInt(CurrentStyle(this).height)]
var _x = (e.offsetX||e.pageX)/50;
var _y = (e.offsetY||e.pageY)/50;
    var _w = parseInt(tatol[2])/50;
var _h = parseInt(tatol[3])/50;
$('ssss').innerHTML ="变化直 x:"+ 50*_x+"           y: "+50*_y
time =setInterval(function(){
    i++;
if(i==51){clearTimeout(time);return}
$('ss').style.width  = tatol[2]-i*_w+'px';
$('ss').style.height = tatol[3]-i*_h+'px';
$('ss').style.left   = parseInt(tatol[0])+i*_x+'px';
$('ss').style.top    = parseInt(tatol[1])+i*_y+'px';
$('sss').innerHTML   = "逐步变化 X:"+_x*i +"           Y:"+_y*i;
$('sssss').innerHTML ='div的变化left:'+(parseInt(tatol[0])+i*_x)+"      top:"+(parseInt(tatol[1])+i*_y)
},2)
}
</script>
</body>

解决方案 »

  1.   


    <body style="margin:0px; padding:0px;">
    <div id='ss' style="height:300px; width:400px; border:1px solid #999999; position:absolute; left:50px; top:50px;"></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id='ssss'>wer</div><br>
    <div id='sss'>wer</div><br>
    <div id='sssss'>wer</div>
    <script>
    var time = null;
    var step = 50;
    var i =0;
    var tatol=[];
    function $(Id){return document.getElementById(Id)};
    var CurrentStyle = function(element){
        return element.currentStyle || document.defaultView.getComputedStyle(element, null);
     };
    $('ss').onclick =function(event){
        var e = event||window.event;
        tatol = [CurrentStyle(this).left,CurrentStyle(this).top,parseInt(CurrentStyle(this).width),parseInt(CurrentStyle(this).height)]
        var _x = (e.offsetX||(e.clientX-parseInt(tatol[0])))/50;
        var _y = (e.offsetY||(e.clientY-parseInt(tatol[1])))/50;
        var _w = parseInt(tatol[2])/50;
        var _h = parseInt(tatol[3])/50;
        $('ssss').innerHTML ="变化直 x:"+ 50*_x+"           y: "+50*_y
        time =setInterval(function(){
            i++;
            if(i==51){clearTimeout(time);return}
            $('ss').style.width  = tatol[2]-i*_w+'px';
            $('ss').style.height = tatol[3]-i*_h+'px';
            $('ss').style.left   = parseInt(tatol[0])+i*_x+'px';
            $('ss').style.top    = parseInt(tatol[1])+i*_y+'px';
            $('sss').innerHTML   = "逐步变化 X:"+_x*i +"           Y:"+_y*i;
            $('sssss').innerHTML ='div的变化left:'+(parseInt(tatol[0])+i*_x)+"      top:"+(parseInt(tatol[1])+i*_y)
        },2)
    }
    </script>
    </body>
      

  2.   

    to cloudgamer   ff版本3.0   我这边是不一样的 总是有固定的误差 大概top,left都差20px;to hookee       ff版本3.0   测试结果 本机测试  总是有固定的误差   大概top,left都差20px;
      

  3.   

    hookee 的我也测试了.没问题哦.
      

  4.   

    这两句改下，就差div的初始位置而已
        var _x = (e.offsetX||(e.clientX-parseInt(tatol[0])))/50;
        var _y = (e.offsetY||(e.clientY-parseInt(tatol[1])))/50;
      

  5.   

    你的有问题.hookee的没.
    FF 3.0.6的
      

  6.   

    恩 大概明白了
    pageX好象理解错了
    多谢各位了!~
      

  7.   

    hookee的可以
    e.offsetX||e.pageX两个不同的东西怎么可以这样操作呢