Question

需要一点帮助。我想在框下面设置动画，以便使用（窗口）响应页面大小.width（）;和（窗口）.height（）; 我应该在哪里实现（窗口）.width＆amp;身高功能？以下是我到目前为止所做的事情：

代码：

$(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

你只需要使用你的窗户宽度和高度，就像这样大小和宽度：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

用响应性动画一个Div

1 个答案: