Fatal编程技术网

Javascript 使用CSS移动div

javascript animation css

Javascript 使用CSS移动div,javascript,animation,css,Javascript,Animation,Css,这个问题应该很简单，但我对这些方法还不熟悉 简而言之，这就是我想要完成的：我想要触发一个动画，将div移动到指定数量的像素。就这样。让我们想象一下，屏幕上有代表每个键盘箭头的按钮。每次单击箭头时，长方体将从其当前位置沿适当方向移动指定数量的像素 我最初是通过一个转换完成的，但它只工作一次。几个小时以来，我一直在寻找这个基本问题的答案，我真的很沮丧 请用基本javascript回答。我不想在这个项目中使用外部库 （编辑） 我不是问如何在所有浏览器中实现这一点。我在问如何在任何浏览器中实现它。下面是

这个问题应该很简单，但我对这些方法还不熟悉

简而言之，这就是我想要完成的：我想要触发一个动画，将div移动到指定数量的像素。就这样。让我们想象一下，屏幕上有代表每个键盘箭头的按钮。每次单击箭头时，长方体将从其当前位置沿适当方向移动指定数量的像素

我最初是通过一个转换完成的，但它只工作一次。几个小时以来，我一直在寻找这个基本问题的答案，我真的很沮丧

请用基本javascript回答。我不想在这个项目中使用外部库

（编辑）
我不是问如何在所有浏览器中实现这一点。我在问如何在任何浏览器中实现它。

下面是一个使用Javascript/jQuery的演示：

var$ball=$（'#ball'）；//缓存我们的球；）
$（'.btn'）。在（'click'，function（）上{
变量方向=$（this.data（'move'）；
$ball.stop（1）；//清除动画队列
开关（方向）{
案例“向上”：
$ball.animate（{top:'-=30'}）；
打破
案例“关闭”：
$ball.animate（{top:'+=30'}）；
打破
案例“左”：
$ball.animate（{left:'-=30'}）；
打破
案例“正确”：
$ball.animate（{左：'+=30'}）；
打破
}
});
球{
位置：绝对位置；
左：60px；
顶部：60px；
宽度：20px；
高度：20px；
背景：红色；
}

U
D
L
R
假设您的ElementToMove完全位于CSS中，理论上您可以向单击处理程序添加如下内容：

var elementToMove = document.getElementById( 'ElementToMove' );
while ( elementToMove.left < elementToMove.left + 10 )
{
  window.setTimeout(
    function ( )
     {
       elementToMove.style.left = (elementToMove.style.left + 1) + "px";
     },
     100
   );
 }

var elementToMove=document.getElementById（'elementToMove'）；
while（elementToMove.left
第2行中的数字
10
将是单击按钮时要移动的预定量

基本上，这是每十分之一秒移动对象1个像素（第9行中的
100
），直到它移动到您想要的位置为止。您也可以通过
setInterval（）
实现同样的功能。

我使用jquery通过单击获取捕获。我使用了简单的老javascript来移动div。我相信如果您想在javascript中执行大量DOM manip，您会希望熟悉jquery

<html>
<head>
    <title>move it</title>
</head>
<body>
    <div id="box" style="position: absolute; left: 2px; top: 5px; width: 100px; height: 100px;
        background-color: Red;">
    </div>
    <div id="buttons" style="position: absolute; left: 2px; top: 100px;">
        <button id="down"  >
            down
        </button>
        <button id="right"  >
            right
        </button>
    </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    function moveDown() {
        var xx = document.getElementById('box');
        var top = parseInt(xx.style.top);
        xx.style.top = top + 12 + "px";
        console.log(xx.style.top);
    }

    function moveRight() {
        var xx = document.getElementById('box');
        var left = parseInt(xx.style.left);
        xx.style.left = left + 12 + "px";
        console.log(xx.style.top);
    }

    $(function () {
        $("#down").click(moveDown);
        $("#right").click(moveRight);
    });

</script>
</html>


移动它
向下
正确的
函数moveDown（）{
var xx=document.getElementById（'box'）；
var top=parseInt（xx.style.top）；
xx.style.top=top+12+“px”；
console.log（xx.style.top）；
}
函数moveRight（）{
var xx=document.getElementById（'box'）；
var left=parseInt（xx.style.left）；
xx.style.left=左+12+“px”；
console.log（xx.style.top）；
}
$（函数（）{
$（“#向下”）。单击（向下移动）；
$（“#右”）。单击（右键移动）；
});
虽然您不希望使用外部库，但我建议jQuery是专门为DOM操作而构建的，非常适合。你可能有你的理由，只要它们不是“不是在这里发明的”。我完全同意迈克·罗宾逊的观点。。。您应该考虑使用库以避免跨浏览器问题，简化代码…如果您不想使用它（这是可以理解的），我建议您编写一个基本的跨浏览器工作包装，用于向元素添加事件如果您发布原始转换的代码，我们可能可以帮助您将其修改为更
live（）这不是一个“基本”问题。移动DIV并不困难——在浏览器之间平滑地移动DIV非常困难。正如Mike Robinson所说，没有理由重新发明轮子。我不能出于法律目的发布实际代码。我尽量简化了不需要代码的问题。他多次表示他不想使用jQuery-你为什么要给出jQuery答案？@user1090190谢谢你提醒我买一副眼镜，但我希望你知道Q不适合。。。请阅读常见问题解答。我只想展示实际使用库的简单性。“…我不想在这个项目中使用外部库…”并不意味着“我不想要”或“我不能”。没关系。谢谢jquery的回答。很可能我最终不得不依靠它。@Heineman99不客气。谢谢你留下评论。以后一定要读这篇文章。愉快的编码。我最初做了类似的事情，但需要对象的动画。谢谢你。