页面滚动时画图不正常，附上JavaScript画图程序

本来能很正常运行的，不过当页面往下拉了一段距离的时候，会出现偏移，虽然坐标还能取到，但是在正确位置已经画不出图了，画图点会处于鼠标上方，而不是正常的鼠标右边。怎样修改能改好呢？
<html> 
    <head> 
     <style> 
        #j_div_node { 
            border: 0; 
            background-color: blue; 
            display: block; 
            position: absolute; 
        } 
        </style> 
        <script language="javascript" type="text/javascript"> 
            var j_lb_down = false; 
            var j_pixLen  = 2; 
            var j_margin = 2; 
            var j_pre_xy = [0,0]; 
            function m(evt){ 
                //显示鼠标坐标 
                var obj = document.getElementById("j_div"); 
                obj.innerHTML = evt.clientX +","+evt.clientY; 
                obj.style.top = evt.clientY+"px"; 
                obj.style.left= (evt.clientX+15)+"px"; 

                
                //画 
                if(j_lb_down){ 
                    //画点 
                    pix(evt.clientX,evt.clientY); 
                    //画连接线,判断不要从[0,0]画起 
                    if(j_pre_xy[0]!=0&&j_pre_xy[1]!=0){ 
                        line(j_pre_xy,[evt.clientX,evt.clientY]); 
                    } 
                    //记录坐标 
                    j_pre_xy[0] = evt.clientX; 
                    j_pre_xy[1] = evt.clientY; 
                } 
            } 

            //画点 

            function pix(x,y){ 
                    var j_pix = document.createElement("div"); 
                    j_pix.id = "j_div_node"; 
                    j_pix.style.width = j_pixLen+"px"; 
                    j_pix.style.height = j_pixLen+"px"; 
                    j_pix.style.lineHeight = j_pixLen+"px"; 
                    j_pix.style.fontSize = j_pixLen+"px"; 
                    j_pix.style.top = y+"px"; 
                    j_pix.style.left= x+"px"; 
                    document.body.appendChild(j_pix); 
            } 
            
            //连接两个点 
            function line(xy1,xy2){ 
                //控制间隔(间隔越小越卡) 
                var x_cha = Math.abs(xy1[0]-xy2[0]); 
                var y_cha = Math.abs(xy1[1]-xy2[1]); 
                if((x_cha>y_cha?x_cha:y_cha)<j_margin){ 
                    return; 
                } 
                for(var i=j_margin;i<=(x_cha>y_cha?x_cha:y_cha);i+=j_margin){ 
                    //百分比 
                    var per = i/(x_cha>y_cha?x_cha:y_cha); 
                    //用点连线,判断横纵坐标的加或减 
                    pix( 
                        xy1[0]+(xy1[0]>xy2[0]?-(per*x_cha): (per*x_cha)), 
                        xy1[1]+(xy1[1]>xy2[1]?-(per*y_cha): (per*y_cha)) 
                    ); 
                } 
            } 
  
            //删除所有生成的点DIV 
            function rmAllPix(nodeName){ 
                var divs = document.getElementsByTagName("div"); 
                for(var i=divs.length-1 ; i>0 ; i--){ 
                    if(divs[i].id==nodeName){ 
                        document.body.removeChild(divs[i]); 
                    } 
                } 
                // 
                j_pre_xy[0] = 0; 
                j_pre_xy[1] = 0; 
            } 
            
            //MOUSE UP 
            function mouseUp(){ 
                j_lb_down=false; 
                j_pre_xy[0] = 0; 
                j_pre_xy[1] = 0; 
            } 
        </script> 
    </head> 
    <body id="body" onmousemove="m(window.event);" onmousedown="j_lb_down=true;" onmouseup="m(window.event);mouseUp();"> 
        <div name="test" id="j_div" style="position:absolute; top:600; left:200; border:1px solid black; font-size:14px;"></div> 
        <input type="button" onClick="rmAllPix('j_div_node');" value="Clear" /> 
    </body> 
</html>

解决方案 »

  1.   

    原来在style.top里加上document.body.scrollTop就可以了，放上修改过的代码：<html> 
        <head> 
         <style> 
            #j_div_node { 
                border: 0; 
                background-color: blue; 
                display: block; 
                position: absolute; 
            } 
            </style> 
            <script language="javascript" type="text/javascript"> 
                var j_lb_down = false; 
                var j_pixLen  = 2; 
                var j_margin = 2; 
                var j_pre_xy = [0,0]; 
                function m(evt){ 
                    //显示鼠标坐标 
                    var obj = document.getElementById("j_div"); 
                    obj.innerHTML = evt.clientX +","+evt.clientY; 
                    obj.style.top = evt.clientY+document.body.scrollTop+"px"; 
                    obj.style.left= (evt.clientX+15)+"px"; 

                    
                    //画 
                    if(j_lb_down){ 
                        //画点 
                        pix(evt.clientX,evt.clientY); 
                        //画连接线,判断不要从[0,0]画起 
                        if(j_pre_xy[0]!=0&&j_pre_xy[1]!=0){ 
                            line(j_pre_xy,[evt.clientX,evt.clientY]); 
                        } 
                        //记录坐标 
                        j_pre_xy[0] = evt.clientX; 
                        j_pre_xy[1] = evt.clientY; 
                    } 
                } 

                //画点 

                function pix(x,y){ 
                        var j_pix = document.createElement("div"); 
                        j_pix.id = "j_div_node"; 
                        j_pix.style.width = j_pixLen+"px"; 
                        j_pix.style.height = j_pixLen+"px"; 
                        j_pix.style.lineHeight = j_pixLen+"px"; 
                        j_pix.style.fontSize = j_pixLen+"px"; 
                        j_pix.style.top = y+document.body.scrollTop+"px"; 
                        j_pix.style.left= x+"px"; 
                        document.body.appendChild(j_pix); 
                } 
                
                //连接两个点 
                function line(xy1,xy2){ 
                    //控制间隔(间隔越小越卡) 
                    var x_cha = Math.abs(xy1[0]-xy2[0]); 
                    var y_cha = Math.abs(xy1[1]-xy2[1]); 
                    if((x_cha>y_cha?x_cha:y_cha)<j_margin){ 
                        return; 
                    } 
                    for(var i=j_margin;i<=(x_cha>y_cha?x_cha:y_cha);i+=j_margin){ 
                        //百分比 
                        var per = i/(x_cha>y_cha?x_cha:y_cha); 
                        //用点连线,判断横纵坐标的加或减 
                        pix( 
                            xy1[0]+(xy1[0]>xy2[0]?-(per*x_cha): (per*x_cha)), 
                            xy1[1]+(xy1[1]>xy2[1]?-(per*y_cha): (per*y_cha)) 
                        ); 
                    } 
                } 
      
                //删除所有生成的点DIV 
                function rmAllPix(nodeName){ 
                    var divs = document.getElementsByTagName("div"); 
                    for(var i=divs.length-1 ; i>0 ; i--){ 
                        if(divs[i].id==nodeName){ 
                            document.body.removeChild(divs[i]); 
                        } 
                    } 
                    // 
                    j_pre_xy[0] = 0; 
                    j_pre_xy[1] = 0; 
                } 
                
                //MOUSE UP 
                function mouseUp(){ 
                    j_lb_down=false; 
                    j_pre_xy[0] = 0; 
                    j_pre_xy[1] = 0; 
                } 
            </script> 
        </head> 
        <body id="body" onmousemove="m(window.event);" onmousedown="j_lb_down=true;" onmouseup="m(window.event);mouseUp();"> 
            <div name="test" id="j_div" style="position:absolute; top:600; left:200; border:1px solid black; font-size:14px;"></div> 
            <input type="button" onClick="rmAllPix('j_div_node');" value="Clear" /> 
        </body> 
    </html>