个人中心
gpt4 book ai didi

javascript - 单击时无法调整循环 "cloud"图像大小

转载 作者：行者123 更新时间：2023-11-28 03:02:04 24 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>
    </html>
    Also here is the code I tried using when resizing the cloud.

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

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

最佳答案 

$("#clouds").click(function(){
    $("#clouds").css({"height" : "350", "background-color" : "red"});
});

我看不到你的 CSS，但假设#clouds 只是云本身，这将是改变云的高度和颜色的一种方法。

您似乎还试图在 0.5 秒内应用高度变化？如果是这种情况，您可以通过添加一个额外的 css 属性来做到这一点。

$("#clouds").click(function(){
    $("#clouds").css({"height" : "350", 
    "background-color" : "red", 
    "transition" : "height 0.5s"});
});

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

24 4 0
文章推荐： css - 从右侧滑入div时如何将div居中放置在剩余空间中
文章推荐： html - CSS div 使用 'position absolute' 隐藏内容
文章推荐： html - 设置100宽高也出现滚动条
文章推荐： html - 我的反馈选项卡不会显示我的代码？
行者123
个人简介

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

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