个人中心
gpt4 book ai didi

javascript - 单击它调整循环云图像的大小

转载 作者：行者123 更新时间：2023-11-28 03:02:06 28 4
gpt4 key购买 nike

这是循环云的代码，动画从右到左循环，我想让云在单击时可以调整大小，但我不知道该怎么做...

<!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>

这是我尝试调整云大小的方法:

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

还有 CSS:

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

最佳答案

在这段代码中，我们以从左到右然后从右到左的方式为分区设置动画

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

关于javascript - 单击它调整循环云图像的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46142738/

28 4 0
文章推荐： c++ - 对字符串数组进行排序会导致段错误
文章推荐： C++ sscanf_s 值不正确
文章推荐： c++ - 在 C++ 中通过 backgroundworker ReportProgress 发送 int 数组
文章推荐： javascript - 更新不可变对象(immutable对象)而不破坏 JavaScript 中的不变性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com