Question

我的功能不起作用，我的div没有动，错了什么？

function moveAnimate(x, y, element) {
   var leftX = document.getElementById(element).style.left;
   var topY = document.getElementById(element).style.top;

   leftX += x;
   topY += y;

$(element).animate({ 
    "top": topY, 
    "left": leftX,
}, 1000);    
}; 

$(document).ready(function() {
    $("#divv").on("click", function() {
        moveAnimate(400, 400, this);
    });
});

这是正常的div：

<div id="divv"></div>

正常的css：

#divv {
        position: absolute;
        height: 100px;
        width: 100px;
        background-color: blue;
        left: 100px;
        top: 100px; }

我不知道这段代码有什么问题，为什么它无效？

而且我不知道怎么做脚本到玩家的动作，任何想法？我只是想在一些div的中间设置一个玩家，当我点击某个地方玩家将去那里。有人可以用最简单的方式做那个小脚本并向我解释一下吗？

Answer 1

我更改了鳕鱼，现在当您在文档中单击鼠标时div将移动到该位置：

＆＃13;

   var posX = 0;
   var posY = 0;
   var currentPositionX = 0;
   var currentPositionY = 0;

function moveAnimate(x, y, element) {
   var elementPosition = $(element).position();
   var leftX = elementPosition.left;
   var topY = elementPosition.top;

   leftX = x;
   topY = y;

$(element).animate({ 
    "top": topY, 
    "left": leftX,
}, 1000);    
}; 

$(document).ready(function() {
    $(document).on("click", function(e) {
        moveAnimate(e.pageX, e.pageY, "#divv");
    });
});

＆＃13;

#divv {
        position: absolute;
        height: 100px;
        width: 100px;
        background-color: blue;
        left: 100px;
        top: 100px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divv"></div>

＆＃13;

Div没有移动+玩家移动

1 个答案: