jQuery .css（'right'）不起作用

我在jQuery中做了一個簡單的遊戲。我無法將蜘蛛圖像轉向東北。我在西北部工作得很好，但由於某些原因，東北地區似乎沒有工作。這是我的初始密碼：jQuery .css（'right'）不起作用

// 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'); 
    }

來源

2011-10-01 Farhan Ahmad

我很好奇，爲什麼你只把某些'CSS（）'參數，如'position'，內引號'''，但不是所有的人。 – Sparky

「Right」不起作用，因爲right的CSS屬性設置爲「auto」。你必須計算右偏移，使用（這個替換當前的右比較表達式）：

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

來源

2011-10-01 15:51:56

我需要對底部做同樣的事嗎？如果是這樣，我將如何計算底部偏移量？ –

相同的代碼，''高度''交換'寬度'，''頂部''交換''。 –

我明白了。非常感謝你的幫助:) –

有人猜測，這是因爲一個DOM元素只有與它們一起定位的「底部」和「右側」屬性。也就是說，當您執行.css('right')時，瀏覽器/ jQuery不會自動計算窗口/文檔右邊緣的距離。

如果要查找的是元素右邊的位置，請嘗試添加左邊的位置和寬度。

來源

2011-10-01 15:49:57 millimoose

@搶劫-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)

來源

2011-10-01 16:01:29 Rifat

jQuery .css（'right'）不起作用

回答

相關問題