Question

我试图让网页中的图片越来越小，5秒后我在jquery中将其保存在特定的div上时消失

Answer 1

要从一个div到另一个div进行碰撞检测，您需要使用js中的offset（）并消失图像，您可以使用css3动画。

我相信你正在寻找能在我的本地机器上完美运行的产品：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Opdracht2</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  #cage { padding: 0.5em;  width: 42px; height: 42px; }

  #resize {
     width: 0px;
    -moz-animation: scale 0.5s; /* Firefox */
    -webkit-animation: scale 0.5s; /* Safari and Chrome */
    -o-animation: scale 0.5s; /* Opera */
    animation: scale 5s;
}
    @keyframes scale {
        from {
            width:150px;
        }
        to {
            width:55px;
        }
    }
    @-moz-keyframes scale { /* Firefox */
        from {
            width:150px;
        }
        to {
            width:55px;
        }
    }
    @-webkit-keyframes scale { /* Safari and Chrome */
        from {
            width:150px;
        }
        to {
            width:55px;
        }
    }
    @-o-keyframes scale { /* Opera */
        from {
            width:150px;
        }
        to {
            width:55px;
        }
    }


  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );

    function collision($img, $cage) {
    var img_left = $img.offset().left;
    var img_top= $img.offset().top;
    var img_height = $img.outerHeight();
    var img_width = $img.outerWidth();
    var img_l_w = img_left + img_width;
    var img_t_h = img_height + img_top;

    var cage_left = $cage.offset().left;
    var cage_top= $cage.offset().top;
    var cage_height = $cage.outerHeight();
    var cage_width = $cage.outerWidth();
    var cage_l_w = cage_left + cage_width;
    var cage_t_h = cage_height + cage_top;

    if(img_t_h < cage_top || img_l_w < cage_left || img_top > cage_t_h || img_left > cage_l_w ) return false;
    return true;    


    }


window.setInterval(function() {
    var colli = collision($('.growimage'), $('.cage'));
    if(colli){
        clearInterval(1);
        $(".growimage img").attr('id','resize');
    }
    console.log(colli);

}, 100);
  </script>
</head>
<body>

<div id="draggable" class="growimage">
  <img src="duck.png" alt="Duck" height="150px" width="150px">
</div>
<br>
<div id="cage" class ="cage">
  <img src="kooi.png" alt="kooi" height="42px" width="42px">
</div>


</body>
</html>

将图片悬停在div上可使图片缓慢消失

1 个答案: