Robię prostą grę w jQuery. Mam problemy z obracaniem obrazu pająka na północny wschód. Pracuję dobrze z północnym zachodem, ale z jakiegoś powodu na północny wschód nie działa. Oto mój kod init:

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

Oto moja część Kodeksu, który jest odpowiedzialny za obracanie IT North East lub North West. Jak powiedziałem wcześniej, północny zachód wydaje się doskonale pracować w porządku, ale kiedy ten sam kod jest używany do obracania go na północnym Wschodzie, nie działa.

// 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'); 
     }
2
Farhan Ahmad 1 październik 2011, 19:43

3 odpowiedzi

Najlepsza odpowiedź

"Prawo" nie działa, ponieważ atrybut CSS dla right jest ustawiony na "Auto". Musisz obliczyć odpowiednie przesunięcia, używając (wymień bieżące wyrażenie w prawo)::

(dream.parent().width() - dream.width() - dream.offset().left) <
(angel.parent().width() - angel.width() - angel.offset().left)
6
Rob W 1 październik 2011, 15:51

@ Rob-W wyjaśnił powód, a także dał sposób, aby go rozwiązać.

Innym sposobem jest, zawsze możesz ustawić wszystkie cztery właściwości, prawy, górny, dołu. nie trzeba ustawić wysokości i szerokości. jak -

    //width: "200px",
    //height: "200px;",
    'position': 'absolute',
    top: y - 100,
    left: x - 100,
    right: x + 100, //(x - 100 + 200)
    bottom: y + 100, //(y - 100 + 200)
2
Rifat 1 październik 2011, 16:01

Zgadnij, że jest to, że element DOM będzie miał tylko atrybuty "dno" i "prawe", jeśli został z nimi ustawiony. Oznacza to, że przeglądarka / jQuery nie automatycznie oblicza odległości od prawej krawędzi okna / dokumentu dla Ciebie, gdy zrobisz .css('right').

Jeśli to, co chcesz znaleźć, jest położenie prawej krawędzi elementu, spróbuj dodać położenie lewej krawędzi i szerokości.

1
millimoose 1 październik 2011, 15:49