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.
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.
1 odpowiedź
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).