jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用JQuery使div标签的背景颜色不断变化?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用for循环和rgb()值连续更改div标签的背景.
以下是我在sample.html中编写的代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>sample</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script >
        <script>
        $(document).ready(function(){
            var r=0;
            var g=0;    
            var b=0;

            for(r=0;r<255;r++)
            {
                for(g=0;g<255;g++)
                {
                    for(b=0;b<255;b++)
                    {
                        $("#sqr").css("BACkground-color","rgb(r,g,b)");
                    }
                }
            }
        });

        </script>


        <style>
        #sqr{BACkground-color:rgb(255,0);
             height:200px;
              width:200px;
            }
        </style>

    </head>
    <body>

    <div id="sqr">
    </div>

    </body>
    </html>

所以enyone告诉我应该如何制作代码,以便div的背景颜色在页面加载时自动更改?
请注意,我想非常顺利地改变颜色.

如果你想看看我想要的效果,请访问:here并查看效果显示.

根据一些建议,我已将代码更改为:

$("#sqr").css("BACkground-color","rgb("+r+","+g+","+b+")");

现在正确地获取rgb的值,但是在浏览器中没有正确加载效果,显示对话框:

解决方法

由于这个问题被标记为CSS,我想为此贡献一个纯CSS解决方案,只需使用CSS3 @keyframes,你可以简单地为你想要的元素添加颜色,可以使用%步进动画,你也可以使用动画-iteration-count并将其设置为无限.如果你想在有限的时间内迭代它,只需将无限变为你想要的任何值,但要确保它是一个整数.

Demo

.animate {
    height: 200px;
    width: 400px;
    border: 1px solid #000;
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%   {BACkground:red;}
    50%  {BACkground:green;}
    100% {BACkground:blue;}
}

@-webkit-keyframes animate_bg {
    0%   {BACkground:red;}
    50%  {BACkground:green;}
    100% {BACkground:blue;}
}

这是在CSS3规范中引入的,因此您可以参this链接获取浏览器支持.

有许多polyfills适用于不支持CSS3 @keyframes的浏览器,所以如果你想要支持旧浏览器,你可能需要使用它,如果你不关心旧浏览器,你可以使用它而不是任何犹豫.

大佬总结

以上是大佬教程为你收集整理的如何使用JQuery使div标签的背景颜色不断变化?全部内容,希望文章能够帮你解决如何使用JQuery使div标签的背景颜色不断变化?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。