首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

DIV移动的有关问题,

2012-03-15 
DIV移动的问题,求助~!很奇怪的一件事,dragDiv.style.leftdragDivLeft-1+px这个地方我明明是减1,为什么

DIV移动的问题,求助~!
很奇怪的一件事,
dragDiv.style.left=dragDivLeft-1+'px';

这个地方我明明是减1,为什么得到的数字反而越大呢?

求指点。。。。谢谢

HTML code
<!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>


[解决办法]
虽然是dragDivLeft-1,但实际上你算出来的dragDivLeft比原来大1,设置节点调试下吧。
[解决办法]
LS的这个问题好像是IE/ff起始坐标点不同造成的吧!
IE好象是(2,2).其他是(0,0)开始!
《JS高级程序设计》里面说过。11章!

热点排行
Bad Request.