弹出的div移动(IE支持，FF不支持帮忙看一下！)

var IE = (document.all) ? true: false;
var x = 0;
var y = 0;
var top  = 0;
var left = 0;
var active = 0;
function fnsDown(event)
{
   var div = document.getElementById ("dv_move");
 if(IE==true)
 {
    x = window.event.clientX;
    y = window.event.clientY;
    top  = div.style.pixelTop;
    left = div.style.pixelLeft;
  }
  else
  {
    x =event.pageX;
    y =event.pageY;
    
    top  = parseInt(div.style.top.split("px")[0]);
    left = parseInt(div.style.left.split("px")[0]);  }  
    active = 1;
    //event.srcElement.setCapture();}
function fnMove(event)
{
     var div = document.getElementById ("dv_move");
     if(IE)
     {
        div.style.cursor = "hand";
     }
     else
     {
        div.style.cursor = "pointer";
     }
     
     if(IE&&active==1 && window.event.button==1)
     {
         div.style.top = (top +window.event.clientY -y)+"px";
         div.style.left = (left +window.event.clientX -x)+"px";
     }
     else if(IE==false&&active==1 && event.button==0)
     {         div.style.top = (top +event.y -y)+"px";
         div.style.left = (left +event.x -x)+"px";
     }
    }
function fnUp(event)
{
   
    active = 0;
}

解决方案 »

  1.   

    把变量名top left active换下名字
      

  2.   

    作用就是弹出的层移动啊！现在的代码是在IE中能移动，在FF中不能移动！
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <div id="img" style="position:absolute;width:200px; height:151px;left:20px;top:10px"><img src="1.jpg" border="0"></div>
    <script LANGUAGE="JavaScript">
    var xPos = 20;
    var yPos = 10;var step = 1;
    var delay = 30; 
    var width,height,Hoffset,Woffset;
    var y = 1;
    var x = 1;
    var interval;
    var img=divcao = document.getElementById("img");
    function changePos() 
    {
      width = document.body.clientWidth;
      height = document.body.clientHeight;
      Hoffset = img.offsetHeight;
      Woffset = img.offsetWidth;
      if (y) 
      {
        yPos = yPos + step;
      }
      else 
      {
        yPos = yPos - step;
      }
      if (yPos < 200) 
      {
        y = 1;
        yPos = 200;
      }
      if (yPos >= (height - Hoffset - 200)) 
      {
        y = 0;
        yPos = (height - Hoffset-200);
      }
      if (x) 
      {
        xPos = xPos + step;
      }
      else 
      {
        xPos = xPos - step;
      }
      if (xPos < 200) 
      {
        x = 1;
        xPos = 200;
      }
      if (xPos >= (width - Woffset-200)) 
      {
        x = 0;
        xPos = (width - Woffset-200);
      }
      img.style.left = xPos + document.body.scrollLeft;
      img.style.top = yPos + document.body.scrollTop;
    }
    function start() 
    {  interval = setInterval('changePos()', delay);
    }
    function pause_resume() 
    {
        clearInterval(interval);
    }
    start();
    </script>
    <script language=javascript>
    var cao_x;
    var cao_y;
    var divcao;
    var isDown = false;
    function display() 
    {  //document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>查看效果</button></td></tr></table>");
      document.write("<div  id='cao1' style='position:absolute;display:none;width:200px;height:180px;font-size:12px;position:absolute;text-align:center;background-color:#ddd;' >");
      document.write("<div style='z-index:500'>");
      document.write("<table width=200 height=20 bgcolor=green  style='cursor:move;' onmousedown='mdown(event)' > ");
      document.write("<tr align=center>");
      document.write("<td align=left>按下左键可拖动</td>");
      document.write("</tr>");
      document.write("</table>");
      document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><br>可拖动层<br></span>");
      document.write("  </div>");
      document.write("</div>");
    }
    function mdown(ev)
    { 
        ev=ev||event;
        var x = ev.x||ev.pageX;
        var y= ev.y ||ev.pageY;
        cao_x=x-parseInt(divcao.style.left);
        cao_y=y-parseInt(divcao.style.top);
        isDown =true;
    }
    function caoMove(ev)  //实现层的拖移
    {
        if(isDown){
            ev=ev||event;
          if(ev.button==1|| ev.button==0)
          {
            var cX=divcao.clientLeft;
            var cY=divcao.clientTop;
            var x = ev.x||ev.pageX;
            var y=  ev.y ||ev.pageY;
            x = cX+(x-cao_x);
            x= x<0 ? 0:( x>(cX=getClientWidth()-divcao.offsetWidth)?cX:x);       
            y=cY+(y-cao_y);
            cY= getScrollTop();
            cY=cY<0?0:cY;
             y= y<cY ? cY :(y>(cY= cY + getClientHeight() - divcao.offsetHeight)?cY:y);        divcao.style.left=(x)+"px";
            divcao.style.top=(y)+"px";
          }
        }
    }
    document.onmouseup=function(){ isDown =false;};
    document.onmousemove=function(e){ caoMove(e);};display();
    setTimeout(function(){
    divcao = document.getElementById("cao1");
    divcao.style.display="";
    divcao.style.left =((getClientWidth()-200)/2)+ "px";
    divcao.style.top =(getClientHeight() -  divcao.offsetHeight)/2 +getScrollTop()+ "px";},500);window.onscroll=function(ev){    if(divcao)
        {
          //  divcao.style.top =( (document.body.clientHeight -  divcao.offsetHeight)/2 +document.body.scrollTop )+"px" ;
            SetTop();
        }
    };
    function SetTop()
    {
    var toTop = (getClientHeight() -  divcao.offsetHeight)/2 +getScrollTop();
    var top = parseInt(divcao.style.top);
    if(top<toTop-1)
    {
    divcao.style.top = (++top) +"px";
    setTimeout(function(){SetTop();},5);
    }else if(top>toTop+1){
    divcao.style.top = (--top) +"px";
    setTimeout(function(){SetTop();},5);
    }else{
        divcao.style.top = (toTop) +"px";
    }
    } /********************
         * 取窗口滚动条滚动高度 
         ******************/
        var getScrollTop=function ()
        {
           return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
        };
        /********************
         * 取窗口可视范围的高度 
         *******************/
        var getClientHeight=function()
        {
           return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientHeight:document.documentElement.clientHeight;  
        };
         /********************
         * 取窗口可视范围的宽度 
         *******************/
        var getClientWidth=function()
        { 
           return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientWidth:document.documentElement.clientWidth;  
        };
    </script>
    </body>
    </html>
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <div id="img" style="position:absolute;width:200px; height:151px;left:20px;top:10px"><img src="1.jpg" border="0"></div>
    <script LANGUAGE="JavaScript">
    var xPos = 20;
    var yPos = 10;var step = 1;
    var delay = 30; 
    var width,height,Hoffset,Woffset;
    var y = 1;
    var x = 1;
    var interval;
    var img=divcao = document.getElementById("img");
    function changePos() 
    {
      width = document.body.clientWidth;
      height = document.body.clientHeight;
      Hoffset = img.offsetHeight;
      Woffset = img.offsetWidth;
      if (y) 
      {
        yPos = yPos + step;
      }
      else 
      {
        yPos = yPos - step;
      }
      if (yPos < 200) 
      {
        y = 1;
        yPos = 200;
      }
      if (yPos >= (height - Hoffset - 200)) 
      {
        y = 0;
        yPos = (height - Hoffset-200);
      }
      if (x) 
      {
        xPos = xPos + step;
      }
      else 
      {
        xPos = xPos - step;
      }
      if (xPos < 200) 
      {
        x = 1;
        xPos = 200;
      }
      if (xPos >= (width - Woffset-200)) 
      {
        x = 0;
        xPos = (width - Woffset-200);
      }
      img.style.left = xPos + document.body.scrollLeft;
      img.style.top = yPos + document.body.scrollTop;
    }
    function start() 
    {  interval = setInterval('changePos()', delay);
    }
    function pause_resume() 
    {
        clearInterval(interval);
    }
    start();
    </script>
    <script language=javascript>
    var cao_x;
    var cao_y;
    var divcao;
    var isDown = false;
    function display() 
    {  //document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>查看效果</button></td></tr></table>");
      document.write("<div  id='cao1' style='position:absolute;display:none;width:200px;height:180px;font-size:12px;position:absolute;text-align:center;background-color:#ddd;' >");
      document.write("<div style='z-index:500'>");
      document.write("<table width=200 height=20 bgcolor=green  style='cursor:move;' onmousedown='mdown(event)' > ");
      document.write("<tr align=center>");
      document.write("<td align=left>按下左键可拖动</td>");
      document.write("</tr>");
      document.write("</table>");
      document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><br>可拖动层<br></span>");
      document.write("  </div>");
      document.write("</div>");
    }
    function mdown(ev)
    { 
        ev=ev||event;
        var x = ev.x||ev.pageX;
        var y= ev.y ||ev.pageY;
        cao_x=x-parseInt(divcao.style.left);
        cao_y=y-parseInt(divcao.style.top);
        isDown =true;
    }
    function caoMove(ev)  //实现层的拖移
    {
        if(isDown){
            ev=ev||event;
          if(ev.button==1|| ev.button==0)
          {
            var cX=divcao.clientLeft;
            var cY=divcao.clientTop;
            var x = ev.x||ev.pageX;
            var y=  ev.y ||ev.pageY;
            x = cX+(x-cao_x);
            x= x<0 ? 0:( x>(cX=getClientWidth()-divcao.offsetWidth)?cX:x);       
            y=cY+(y-cao_y);
            cY= getScrollTop();
            cY=cY<0?0:cY;
             y= y<cY ? cY :(y>(cY= cY + getClientHeight() - divcao.offsetHeight)?cY:y);        divcao.style.left=(x)+"px";
            divcao.style.top=(y)+"px";
          }
        }
    }
    document.onmouseup=function(){ isDown =false;};
    document.onmousemove=function(e){ caoMove(e);};display();
    setTimeout(function(){
    divcao = document.getElementById("cao1");
    divcao.style.display="";
    divcao.style.left =((getClientWidth()-200)/2)+ "px";
    divcao.style.top =(getClientHeight() -  divcao.offsetHeight)/2 +getScrollTop()+ "px";},500);window.onscroll=function(ev){    if(divcao)
        {
          //  divcao.style.top =( (document.body.clientHeight -  divcao.offsetHeight)/2 +document.body.scrollTop )+"px" ;
            SetTop();
        }
    };
    function SetTop()
    {
    var toTop = (getClientHeight() -  divcao.offsetHeight)/2 +getScrollTop();
    var top = parseInt(divcao.style.top);
    if(top<toTop-1)
    {
    divcao.style.top = (++top) +"px";
    setTimeout(function(){SetTop();},5);
    }else if(top>toTop+1){
    divcao.style.top = (--top) +"px";
    setTimeout(function(){SetTop();},5);
    }else{
        divcao.style.top = (toTop) +"px";
    }
    } /********************
         * 取窗口滚动条滚动高度 
         ******************/
        var getScrollTop=function ()
        {
           return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
        };
        /********************
         * 取窗口可视范围的高度 
         *******************/
        var getClientHeight=function()
        {
           return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientHeight:document.documentElement.clientHeight;  
        };
         /********************
         * 取窗口可视范围的宽度 
         *******************/
        var getClientWidth=function()
        { 
           return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientWidth:document.documentElement.clientWidth;  
        };
    </script>
    </body>
    </html>
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <div id="img" style="position:absolute;width:200px; height:151px;left:20px;top:10px"><img src="1.jpg" border="0"></div>
    <script LANGUAGE="JavaScript">
    var xPos = 20;
    var yPos = 10;var step = 1;
    var delay = 30; 
    var width,height,Hoffset,Woffset;
    var y = 1;
    var x = 1;
    var interval;
    var img=divcao = document.getElementById("img");
    function changePos() 
    {
      width = document.body.clientWidth;
      height = document.body.clientHeight;
      Hoffset = img.offsetHeight;
      Woffset = img.offsetWidth;
      if (y) 
      {
        yPos = yPos + step;
      }
      else 
      {
        yPos = yPos - step;
      }
      if (yPos < 200) 
      {
        y = 1;
        yPos = 200;
      }
      if (yPos >= (height - Hoffset - 200)) 
      {
        y = 0;
        yPos = (height - Hoffset-200);
      }
      if (x) 
      {
        xPos = xPos + step;
      }
      else 
      {
        xPos = xPos - step;
      }
      if (xPos < 200) 
      {
        x = 1;
        xPos = 200;
      }
      if (xPos >= (width - Woffset-200)) 
      {
        x = 0;
        xPos = (width - Woffset-200);
      }
      img.style.left = xPos + document.body.scrollLeft;
      img.style.top = yPos + document.body.scrollTop;
    }
    function start() 
    {  interval = setInterval('changePos()', delay);
    }
    function pause_resume() 
    {
        clearInterval(interval);
    }
    start();
    </script>
    <script language=javascript>
    var cao_x;
    var cao_y;
    var divcao;
    var isDown = false;
    function display() 
    {  //document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>查看效果</button></td></tr></table>");
      document.write("<div  id='cao1' style='position:absolute;display:none;width:200px;height:180px;font-size:12px;position:absolute;text-align:center;background-color:#ddd;' >");
      document.write("<div style='z-index:500'>");
      document.write("<table width=200 height=20 bgcolor=green  style='cursor:move;' onmousedown='mdown(event)' > ");
      document.write("<tr align=center>");
      document.write("<td align=left>按下左键可拖动</td>");
      document.write("</tr>");
      document.write("</table>");
      document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><br>可拖动层<br></span>");
      document.write("  </div>");
      document.write("</div>");
    }
    function mdown(ev)
    { 
        ev=ev||event;
        var x = ev.x||ev.pageX;
        var y= ev.y ||ev.pageY;
        cao_x=x-parseInt(divcao.style.left);
        cao_y=y-parseInt(divcao.style.top);
        isDown =true;
    }
    function caoMove(ev)  //实现层的拖移
    {
        if(isDown){
            ev=ev||event;
          if(ev.button==1|| ev.button==0)
          {
            var cX=divcao.clientLeft;
            var cY=divcao.clientTop;
            var x = ev.x||ev.pageX;
            var y=  ev.y ||ev.pageY;
            x = cX+(x-cao_x);
            x= x<0 ? 0:( x>(cX=getClientWidth()-divcao.offsetWidth)?cX:x);       
            y=cY+(y-cao_y);
            cY= getScrollTop();
            cY=cY<0?0:cY;
             y= y<cY ? cY :(y>(cY= cY + getClientHeight() - divcao.offsetHeight)?cY:y);        divcao.style.left=(x)+"px";
            divcao.style.top=(y)+"px";
          }
        }
    }
    document.onmouseup=function(){ isDown =false;};
    document.onmousemove=function(e){ caoMove(e);};display();
    setTimeout(function(){
    divcao = document.getElementById("cao1");
    divcao.style.display="";
    divcao.style.left =((getClientWidth()-200)/2)+ "px";
    divcao.style.top =(getClientHeight() -  divcao.offsetHeight)/2 +getScrollTop()+ "px";},500);window.onscroll=function(ev){    if(divcao)
        {
          //  divcao.style.top =( (document.body.clientHeight -  divcao.offsetHeight)/2 +document.body.scrollTop )+"px" ;
            SetTop();
        }
    };
    function SetTop()
    {
    var toTop = (getClientHeight() -  divcao.offsetHeight)/2 +getScrollTop();
    var top = parseInt(divcao.style.top);
    if(top<toTop-1)
    {
    divcao.style.top = (++top) +"px";
    setTimeout(function(){SetTop();},5);
    }else if(top>toTop+1){
    divcao.style.top = (--top) +"px";
    setTimeout(function(){SetTop();},5);
    }else{
        divcao.style.top = (toTop) +"px";
    }
    } /********************
         * 取窗口滚动条滚动高度 
         ******************/
        var getScrollTop=function ()
        {
           return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
        };
        /********************
         * 取窗口可视范围的高度 
         *******************/
        var getClientHeight=function()
        {
           return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientHeight:document.documentElement.clientHeight;  
        };
         /********************
         * 取窗口可视范围的宽度 
         *******************/
        var getClientWidth=function()
        { 
           return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientWidth:document.documentElement.clientWidth;  
        };
    </script>
    </body>
    </html>
      

  6.   

    你看一下，FF中alert(div.style.top)弹出来的是什么，就知道原因了！