关于JS中的offsetX

我想通过点击块后移动鼠标实现该块的滑动效果，但是发现做出来后当移动鼠标时滑动得不流畅，有闪动，有时候甚至会有较大幅度的跳动，找了很久没找出什么问题。请问有人知道问题出在哪吗？万分感谢<html>
<head>
<script language="JavaScript">
var selected = false;document.onmousemove = MoveSlid;function MoveSlid()
{
if (!selected)
{
return;
}

var element = document.getElementById('slider'); var evt=window.event;
var x = evt.offsetX;
if (x < 10)
{
element.style.left = 10;
}
else if (x > 500)
{
element.style.left = 500;
}
else
{
element.style.left = x;
}

}</script>
</head><body>
<div style="height:200px;width:600px;position:relative;margin:100px;border:1px solid red;padding:10px;">
<div id="slider" onClick="selected=true;" onBlur="selected=false;" style="height:40px;width:10px;position:absolute;left:30px;top:20px;background:pink;z-index:9999;"></div>
<div style="margin:10px;height:60px;border:1px solid blue;"></div>
</div>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

pageX的话在不同分辨率的显示器不好处理，所以用相对坐标，但是不知道为什么有闪动
浏览器问题吧    我之前做作业的时候也是这样在chrome下会不流畅 firefox很流畅
window.event IE only<!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>