Javascript 将div设置为网站角落的动画

我在右下角有一个div。单击其中一个角，div应该通过动画移动到那里。问题似乎是

left

和

top

属性阻塞了它们的对。我可以让它在没有动画的情况下工作，但现在我被卡住了。你可以试试；如果您将其向左或向上移动，但不向后移动，则它会起作用

HTML:

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

---

注意：这不是真正的代码，不要评判我，我只是为了这个问题把它放在一起。

我知道这不是你特别要求的，但这里有一个解决方案，使用css转换动画（你需要为转换添加前缀）

HTML:

JAVASCRIPT:

$("#chatlefttopbtn").click(function(){
    $(".chatdiv").attr("id","topleft");
});
$("#chatrighttopbtn").click(function(){
    $(".chatdiv").attr("id","topright");
});
$("#chatrightbottombtn").click(function(){
    $(".chatdiv").attr("id","bottomright");
});
$("#chatleftbottombtn").click(function(){
    $(".chatdiv").attr("id","bottomleft");
});

---

问题是，您正在为对象的所有四个角指定值：顶部、右侧、底部和左侧

要正确移动，只需更改两个坐标

因为您的聊天窗口从右下角开始，所以我们将使用它作为数据

演示：

基本代码：

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

首先，我们必须解决一些问题，即聊天框的尺寸和文档/窗口的大小。这为我们提供了足够的数据点，以确定动画的位置

接下来是动画：请注意，我们唯一分配新值的维度是底部和右侧

要将其设置为“lefttop”，聊天窗口的底部必须距顶部260px，这相当于文档的高度减去聊天框的高度。left的原则相同：文档宽度减去聊天室宽度

---

更新：我可能会将聊天框的位置更改为固定。或者，我已经在JSFIDLE中包含了一些额外的代码来处理窗口大小调整（原则上）。

以后，请不要绕过包含JSFiddle链接的规则（这些规则要求您将代码直接包含在问题本身中）。代码太长了！在试图找到任何解决方案之前，首先使用四个类

topLeft

topRight

bottomLeft

和

bottomRight

。您不应该在javascript中编写所有CSS，而应该在这4个类中编写。然后，使用javascript在这些类之间切换。并使用Jquery方法，如

$（“#chatrighttopbtn”）

，更加清晰。当你完成这些修改后，我会看看你的问题。引用我自己的话：“注意：这不是真正的代码，不要评判我，我只是为了这个问题把它放在一起。”如果你可能想知道，原因是，原始代码无法上传到公共网站。如果在这段代码上有任何进一步的帮助，那就太好了。我认为你应该对旧的位置做些什么，因为最后你剩下的div有四个位置：top:0px、right:0px、bottom:0px和left:0px。当点击底部的一个按钮时，它不会粘在页面的最底部。但我非常赞赏您的CSS3方法！是的，我不明白为什么那一点不起作用。也许这是一个iframe问题。不太熟悉iFrame。这是一个更好的解决方案，比我想要的更好。谢谢，我对这件非常满意@Slashmaster谢谢，很高兴我能帮上忙。好吧，在一些测试之后，我用ID交换标记了这个答案，这将需要我对原始代码进行大量更改。感谢您的回答，我可以轻松地将其与我自己的代码合并！

<div class="chatdiv"></div>
<input id="chatlefttopbtn" type="button" />
<input id="chatrighttopbtn" type="button" />
<input id="chatleftbottombtn" type="button" />
<input id="chatrightbottombtn" type="button" />

body{margin:0;padding:0;}
.chatdiv  {
    width:400px; 
    height:260px; 
    background-color: #FF9933;
    transition: margin .5s;
}
#topleft{
    margin-left: 0;
    margin-top: 0;
}
#topright{
    margin-top: 0;
    margin-left: calc(100% -  400px);
}
#bottomleft{
    margin-top: calc(100% -  260px);
    margin-left: 0;
}
#bottomright{
    margin-top: calc(100% -  260px);
    margin-left: calc(100% -  400px);
}
#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;               
}

$("#chatlefttopbtn").click(function(){
    $(".chatdiv").attr("id","topleft");
});
$("#chatrighttopbtn").click(function(){
    $(".chatdiv").attr("id","topright");
});
$("#chatrightbottombtn").click(function(){
    $(".chatdiv").attr("id","bottomright");
});
$("#chatleftbottombtn").click(function(){
    $(".chatdiv").attr("id","bottomleft");
});

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