Animowanie div do rogów strony internetowej

Question 1

Mam div w prawym dolnym rogu. Kliknięcie do jednego z rogów, Div powinien poruszać się tam przez animację. Problem wydaje się być, że właściwości left i top blokują ich pary. Mógłbym sprawić, że działa bez animacji, ale teraz utknąłem. Możesz spróbować; Działa, jeśli przeniesiesz go w lewo lub górną, ale nie do tyłu.

JSFiddle

HTML:

<body>
    <div id="chatdiv" style="width:400px; height:260px; position: fixed; top:auto; left:auto;bottom:0px; right:0px; background-color: #FF9933" >
    </div>
    <input id="chatlefttopbtn" type="button" style="position: fixed; left: 0px; top: 0px"/>
    <input id="chatrighttopbtn" type="button" style="position: fixed; right: 0px; top: 0px"/>
    <input id="chatleftbottombtn" type="button" style="position: fixed; left: 0px; bottom: 0px"/>
    <input id="chatrightbottombtn" type="button" style="position: fixed; right: 0px; bottom: 0px"/>
</body>

CSS:

#chatdiv  {
    width:400px; 
    height:260px; 
    position: absolute !important; 
    top:auto;
    left:auto;
    bottom:0px; 
    right:0px; 
    background-color: #FF9933; 
}

#chatlefttopbtn {
    position: fixed;
    left: 0px;
    top: 0px;                  
}

#chatrighttopbtn {
    position: fixed;
    top:0;
    right:0;               
}

#chatleftbottombtn {
    position: fixed;
    left: 0px;
    bottom: 0px;               
}

#chatrightbottombtn {
    position: fixed;
    bottom:0;
    right:0;               
}

JavaScript:

var firstMove = true;

    $(function() { 
        document.getElementById("chatlefttopbtn").addEventListener("click", function() {
        moveChatWindow("lefttop");
    }, false);

    document.getElementById("chatrighttopbtn").addEventListener("click", function() {
        moveChatWindow("righttop");
    }, false);

    document.getElementById("chatleftbottombtn").addEventListener("click", function() {
        moveChatWindow("leftbottom");
    }, false);

    document.getElementById("chatrightbottombtn").addEventListener("click", function() {
        moveChatWindow("rightbottom");
    }, false);
    });

    function moveChatWindow(moveTo) {
    var chatWindow = $("#chatdiv");

    var left = chatWindow.offset().left;
    var right = ($(window).width() - (chatWindow.offset().left + chatWindow.outerWidth()));
    var top = chatWindow.offset().top; 
    var bottom = ($(window).height() - (chatWindow.offset().top + chatWindow.outerHeight()));

    if(firstMove){
        chatWindow.css({left:left, right: right, bottom: bottom, top: top});
        firstMove = false;
    }

    chatWindow.css.position = 'absolute';

    if(moveTo === "lefttop"){
        chatWindow.css.left = left;
        chatWindow.css.top = top;
        chatWindow.css.right = 0;
        chatWindow.css.bottom = 0;

        chatWindow.animate({
            left : '0px',
            top : '0px'
        }, 2000);
    } else if(moveTo === "righttop"){
        chatWindow.css.left = "auto";
        chatWindow.css.top = top;
        chatWindow.css.right = right;
        chatWindow.css.bottom = 0;

        chatWindow.animate({
            top : '0px',
            right : '0px'
        }, 2000);
    } else if(moveTo === "leftbottom"){
        chatWindow.css.top = 0;
        chatWindow.css.left = left;
        chatWindow.css.right = 0;
        chatWindow.css.bottom = bottom; 

        chatWindow.animate({
            left : '0px',
            bottom : '0px'
        }, 2000);
    } else {
        chatWindow.css.left = 0;
        chatWindow.css.top = 0;
        chatWindow.css.right = right;
        chatWindow.css.bottom = bottom;

        chatWindow.animate({
            right : '0px',
            bottom : '0px'
        }, 2000);   
    }
}

Uwaga: To nie jest prawdziwy kod, nie oceniaj mnie, właśnie rzuciłem go razem ze względu na pytanie.

javascript jquery html css

0

Gergo Szucs 18 sierpień 2014, 18:05

Answer

Problem, który masz, jest to, że przypisujesz wartości do wszystkich czterech narożników obiektu: top, prawy, dno i w lewo.

Aby przenieść to prawidłowo, musisz tylko zmienić 2 koordynatów.

Ponieważ okno czatu rozpoczyna się w prawym dolnym rogu, użyjemy tego jako naszego punktu odniesienia.

demo: http://jsfiddle.net/RWS95A1Q/4/

Kod podstawowy:

var chatWindow = $("#chatdiv");
var chatWidth = chatWindow.width();
var chatHeight = chatWindow.height();

var windowWidth = $(window).width();
var windowHeight = $(window).height();

function moveChatWindow(moveTo) {
    if (moveTo === "lefttop") {
        chatWindow.stop().animate({
             bottom: windowHeight - chatHeight
           , right: windowWidth - chatWidth
        }, 2000);
    }
    else if (moveTo === "righttop") {
        chatWindow.stop().animate({
             bottom: windowHeight - chatHeight
           , right: 0
        }, 2000);
    }
    else if (moveTo === "leftbottom") {
        chatWindow.stop().animate({
             bottom: 0
           , right: windowWidth - chatWidth
        }, 2000);
    }
    else {
        chatWindow.stop().animate({
             bottom: 0
           , right: 0
        }, 2000);
    }

Po pierwsze musimy wypracować kilka rzeczy - mianowicie wymiarów pudełka czatu i rozmiar dokumentu / okna. Daje nam wystarczająco dużo punktów danych, aby wypracować, gdzie do animowania.

Dalej przychodzi Animacja: Należy pamiętać, jak jedyne wymiary zawsze przypisujemy nowe wartości, są dno i prawy .

Aby ustawić go do "Lefttop", dolny okna czatu musi być 260px od góry, co odpowiada wysokością dokumentu minus wysokość pudełka czatu. Zleceniodawca dla pozostawiony jest taki sam: szerokość dokumentu minus szerokość pudełka czatu.

Aktualizacja: Prawdopodobnie zmieniłbym pozycjonowanie pudełka czatu, aby naprawić. Alternatywnie zawierałem dodatkowy kod w JSFiddle, aby obsługiwać zmiany rozmiaru okna (w zleceniu).

1

gvee 18 sierpień 2014, 14:57

Question 2