Question

我的右下角有一个div。单击其中一个角，div应该通过动画移动到那里。问题似乎是left和top属性阻止了他们的对。我可以让它在没有动画的情况下工作，但现在我被卡住了。你可以试试;如果你将它移到左边或顶部，但不能向后移动，它会起作用。

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

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

Answer 1

我知道这不是你要求的具体内容，但这是一个使用css过渡动画的解决方案（你需要为过渡添加前缀）。

New fiddle

HTML：

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

CSS：

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

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

Answer 2

您遇到的问题是，您要为对象的所有四个角分配值：顶部，右侧，底部和左侧。

要正确移动，您只需要更改2个坐标。

由于您的聊天窗口位于右下方，我们会将其用作我们的基准。

DEMO：http://jsfiddle.net/rws95a1q/4/

基本代码：

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

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

接下来是动画：请注意我们分配新值的唯一尺寸是底部和正确。

要将其设置为＆＃34; lefttop＆＃34;，聊天窗口的底部需要距离顶部260px，这相当于文档的高度减去高度的聊天框。左的主体是相同的：文档的宽度减去聊天框的宽度。

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

动画div到网站的角落

2 个答案: