在javascript中更改元素及其父元素的位置

时间:2016-06-28 00:49:55

标签: javascript jquery position mousemove

$player位于屏幕的中心,可以在鼠标角度方向连续移动360度,当我移动它时,我也会改变$map在相反方向的位置,保持中心的玩家并在地图中创建“移动”效果......

这是在mousedown上发布的:

var top1 = $map.offset().top;
var left1 = $map.offset().left;
var top2 = ($player.offset().top - $player.height()/2) - ($map.offset().top);
var left2 = ($player.offset().left - $player.width()/2) - ($map.offset().left);

if(interval1 == 'false'){
    interval1 = setInterval(function(){
        var speed = 1;
        var deltaX = Math.cos(angle * Math.PI / 180) * speed;
        var deltaY = Math.sin(angle * Math.PI / 180) * speed;

        $map[0].style.left = (left1 -= deltaX)+'px';
        $map[0].style.top = (top1 -= deltaY)+'px';
        $player[0].style.left = (left2 += deltaX)+'px';
        $player[0].style.top = (top2 += deltaY)+'px';
    }, 1);
}

我在mouseup上执行此操作:

clearInterval(interval1);
interval1 = 'false';

问题是,每当我点燃mousedown时,它会给玩家增加一些小空隙,所以每次点击它都会从中心移动一点......

如何解决此问题?我无法弄清楚是什么造成了这个差距......

2 个答案:

答案 0 :(得分:1)

由于您的setInterval延迟时间太短,您可能会遇到间隙问题。浏览器无法快速绘制介于两者之间的每一步。尝试使用100代替1

进行测试

答案 1 :(得分:0)

如果您有2D游戏 - 对于每个对象,您必须存储全局坐标,这与地图位置无关。然后通过物体坐标和摄像机位置"您可以计算对象的精确渲染坐标。