同样思路，为什么运行效果差这么多？ - JavaScript论坛

楼主

已结贴√ 问题点数：20 回复次数：2

同样思路，为什么运行效果差这么多？

做了一个用鼠标拖动div的效果，但是拖动时感觉很不顺畅！

程序代码：

<html>
<head>
<title>拖动层！</title>
</head>
<body onmouseup="SetMoveFalse()">
    <div id="moves" style="height: 50px;width: 50px;border:1px solid blue;background:#ccc;position :absolute ;" ></div>
<script type="text/javascript" >
var NeedMove = false;
var OldEventX = 0;
var OldEventY = 0;
var a = document.getElementById("moves");
a.onmousedown = SetMoveTrue;
a.onmouseup = SetMoveFalse;
a.onmousemove = MoveDiv;
function SetMoveTrue()
{
    NeedMove = true;
    OldEventX = event.clientX-a.offsetLeft;
    OldEventY = event.clientY-a.offsetTop;
}

function SetMoveFalse()
{
    NeedMove = false;
}

function MoveDiv()
{
    if (NeedMove)
    {
       a.style.top = (event.clientY - OldEventY)+"px";
       a.style.left = (event.clientX - OldEventX)+"px";
    }
}
</script>
</body>
</html>

看了别人的代码，不明白为什么他的代码繁复了那么多，运行起来却是顺畅了许多：
代码地址：http://www.

搜索更多相关主题的帖子: 思路　效果　运行　

第 2 楼

得分:10

万变不离其中
<html>
<head>
<title>拖动层！</title>
</head>
<body onmouseup="SetMoveFalse()">
    <div id="moves" style="height: 50px;width: 50px;border:1px solid blue;background:#ccc;position :absolute ;" ></div>
<script type="text/javascript" >
var NeedMove = false;
var OldEventX = 0;
var OldEventY = 0;
var a = document.getElementById("moves");
a.onmousedown = SetMoveTrue;
document.body.onmouseup = SetMoveFalse;
document.body.onmousemove = MoveDiv;
function SetMoveTrue()
{
    NeedMove = true;
    OldEventX = event.clientX-a.offsetLeft;
    OldEventY = event.clientY-a.offsetTop;
}

function SetMoveFalse()
{
    NeedMove = false;
}

function MoveDiv()
{
    if (NeedMove)
    {
       a.style.top = (event.clientY - OldEventY)+"px";
       a.style.left = (event.clientX - OldEventX)+"px";
    }
}
</script>
</body>
</html>

第 3 楼

得分:10

表演你看吗？
http://pangj.2.

效率是要自己研究的，而不是别人说的。换一片天，风景又不一样了。

世事如潮我如水，只叹江湖几人回。