javascript - 具有响应能力的 Div 动画

Question

只需要一点帮助。我想使用 (window).width(); 对下面的框进行动画处理以响应页面的大小。和(窗口).height(); 我应该在哪里实现 (window).width & height 函数？这是我到目前为止所做的:

代码:

$(document).ready(function(){
            $(".box").click(function(){

                run();

            });
        });

        function run(){
            var duration=1000;
            var width=$(window).width();
            var height=$(window).height();
            $(".box").animate({"marginLeft":"1000px"},duration,function(){
                $(this).animate({"marginTop":"600px"},duration,function(){
                    $(this).animate({"marginLeft":"0px"},duration,function(){
                        $(this).animate({"marginTop":"0px"},duration,function(){
                            run();


                        });
                    });   
                });
            });

        }

CSS:

.box{border:1px solid black; width:200px; height:200px; float:left;}

Answer 1

您只需要使用窗口的宽度和高度，将框的高度和宽度固定下来，如下所示:

$(document).ready(function() {
  $(".box").click(function() {

    run();

  });
});

function run() {
  var duration = 1000;
  var width = $(window).width();
  var height = $(window).height();
  $(".box").animate({
    "marginLeft": width - 200 //<-----
  }, duration, function() {
    $(this).animate({
      "marginTop": height - 200 //<-----
    }, duration, function() {
      $(this).animate({
        "marginLeft": "0px"
      }, duration, function() {
        $(this).animate({
          "marginTop": "0px"
        }, duration, function() {
          run();


        });
      });
    });
  });

}

.box {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">

</div>