Resize a looping cloud image while clicking on it

2019-08-23 02:55发布

站内问答 / JavaScript
992 1 3

Here is the code for the looping cloud, the animation loops from right to left and I would like to make the cloud resize-able when clicked on but I do not know how to do it...

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="clouds">
        <img border="0" alt="animated clouds" src="clouds.png">
        <script>
            $(document).ready(function() {
                function loop() {
                    $('#clouds').css({right:0});
                    $('#clouds').animate ({right: '+=1400'}, 5000, 'linear', function() {
                        loop();
                    });
                }
                loop();
            });
        </script>
    </div>
</body>
</html>

Here is what I tried for resizing the cloud:

$("#clouds").click(function() {
    $("size").animate({"height" : "350"}, 500);
});

And the CSS:

#clouds {
    position:absolute;
    z-index:500;
    right:0px;
    top:10px;
}

1条回答
beautiful°
2楼-- · 2019-08-23 03:55

In this code we animate the divisions in such a way that it animate from left to right and then right to left

$(document).ready(function() {
   function loop() {
    $('.bouncer').animate({'left': '500'}, {
        duration: 1000, 
        complete: function() {
            $('.bouncer').animate({left: 0}, {
                duration: 1000, 
                complete: loop});
        }});
    
    $('<div/>').text('exiting loop').appendTo($('.results'));
}
loop();

 $("#clouds").click(function() {
 console.log("click");
   $("#clouds").animate({"height" : "350"}, 500);
    });
    
   });
.bouncer {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
}

.results {
    float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
 <html>
 <head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="style.css">
  <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
   </script>

   </head>

   <body>
  
<div class="bouncer">
  <img id="clouds" border="0" alt="animated clouds" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsi7hhTHPPcliUGlq2tVlaPu5cmw5QHJOVyQyugHTZOnqLECHLGL9S-qU">
  </div>
  
  </html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)