DIV移动的问题,求助~!
很奇怪的一件事,
dragDiv.style.left=dragDivLeft-1+'px';
这个地方我明明是减1,为什么得到的数字反而越大呢?
求指点。。。。谢谢
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#div1{ width:948px; height:40px; overflow:hidden; position:relative; border:1px #efefef solid; }#div2{ width:40px; height:40px; overflow:hidden; position:absolute; background-color:#bf0000; top:0px; left:0px; }</style><script type="text/javascript">function getById(obj){ return document.getElementById(obj); }//获取鼠标坐标function getMouseXY(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; }window.onload=function(){ var div1=getById('div1');//获取父级ID var dragDiv=getById('div2');//获取子级ID var dragDivLeft=0;//模块左坐标 var mouseLeft=0;//鼠标的左坐标 var moveDis=0;//模块的移动距离 dragDiv.style.left=dragDiv.offsetLeft+'px';//给移动模块添加行内样式var time=[];//向右计时器 var output = function (id, text) { document.getElementById(id).innerHTML += text + '<br/>'; };//数值返回查看器 div1.onmousemove=function(ev) { var oEvent=ev||event; mouseLeft=getMouseXY(oEvent).x;//获取鼠标左坐标 moveDis=mouseLeft-(dragDiv.getBoundingClientRect().left+dragDiv.offsetWidth);//模块移动的距离=鼠标的左坐标-(模块当前的左坐标+模块自己的宽度) time.push(setInterval(function () { dragDivLeft=dragDiv.getBoundingClientRect().left;//模块左坐标 var newmoveDis=mouseLeft-(dragDivLeft+dragDiv.offsetWidth);//模块移动的距离=鼠标的左坐标-(模块当前的左坐标+模块自己的宽度) //向右 if(moveDis>=0){ //只有当鼠标的左坐标-模块的左坐标>0时,并且模块左坐标+自己的宽度<父级模块的宽度时,模块才能向右移动 if(newmoveDis>=0 && dragDivLeft+dragDiv.offsetWidth<=div1.offsetWidth){ dragDiv.style.left=dragDivLeft+1+'px'; output('p1','右移(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')'); } else { clearInterval(time.shift()); output('p1','停止(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')'); } } //向左 else if(moveDis<=0) { //只有当移动距离<=0,并且模块的左坐标>=0时,模块才能移动 if(newmoveDis<=0 && dragDivLeft>=0){ //这个地方不能相减 dragDiv.style.left=dragDivLeft-1+'px'; output('p1','左移(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')'); } else { clearInterval(time.shift()); output('p1','停止(模块坐标:'+dragDivLeft + ',鼠标坐标:'+mouseLeft+',移动距离:' + newmoveDis+')'); } } },10)); }; }</script></head><body><div id="div1"> <div id="div2"></div></div><p id="p1"></p></body></html>