Question

我在jQuery中制作一个简单的游戏。我无法将蜘蛛图像转向东北。我在西北部工作得很好，但由于某种原因，东北部似乎不起作用。这是我的初始代码：

// JavaScript Document
function init(){

    angel = $('<img class="spider">').attr({
        'src': 'img/spider.png'
    }).css({
        width: "125px",
        height: "125px;",
        'position': 'absolute',
        top: -10,
        left: -10
    });

    //append it to body
    $(document.body).append(angel);

    //start dreaming
    do_dream();
}

这是我负责将其转向东北或西北的部分代码。就像我之前说的那样，西北部似乎工作得非常好，但是当使用相同的代码将其转向东北时，它不起作用。

// turn north west
     if (parseInt(dream.css('top')) < parseInt(angel.css('top')) && parseInt(dream.css('left')) < parseInt(angel.css('left'))) { 
         $('.spider').attr('src', 'img/spider_nw.png'); 
     }

    // turn north east
     if (parseInt(dream.css('top')) < parseInt(angel.css('top')) && parseInt(dream.css('right')) < parseInt(angel.css('right'))) { 
         $('.spider').attr('src', 'img/spider_ne.png'); 
     }

Answer 1

“正确”无效，因为right的CSS属性设置为“自动”。你必须使用（用你的当前右比较表达式替换）来计算正确的偏移量：

(dream.parent().width() - dream.width() - dream.offset().left) <
(angel.parent().width() - angel.width() - angel.offset().left)

Answer 2

@ rob-w已经解释了原因并且还给出了解决问题的方法。

另一种方法是，您始终可以设置所有四个属性 - 左，右，上，下。 然后不需要设置高度和宽度。喜欢 -

    //width: "200px",
    //height: "200px;",
    'position': 'absolute',
    top: y - 100,
    left: x - 100,
    right: x + 100, //(x - 100 + 200)
    bottom: y + 100, //(y - 100 + 200)

Answer 3

猜测，这是因为如果DOM元素与它们一起定位，那么它将只具有“底部”和“右侧”属性。也就是说，当你执行.css('right')时，浏览器/ jQuery不会自动计算窗口/文档右边缘的距离。

如果您要查找的是元素右边缘的位置，请尝试添加左边缘的位置和宽度。

jQuery .css（'right'）无效

3 个答案: