Question

我想像here那样制作换色背景，所以我查了一下this place。有一个指向彩色动画jQuery插件的链接，但显然 link 无效。我尝试下载jQuery-ui.zip，在复选框中，没有关于颜色动画的信息。在zip中，我打开了index.html，展示了所有的功能，并且发现，你猜对了，没有关于颜色动画。有一些彩色动画，但它都是瞬间完成的。如果你能为我提供一个链接，甚至可以向正确的方向推进，那将是非常好的。

我知道这并不属于stackoverflow，但我找不到更好的。

Answer 1

要回答关于他们如何在评论中执行此操作的问题，请查看页面来源。我发现了这个：

<table class="main"><tr><td id="bg">
<table class="main"><tr><td style="background-color:rgba(0,0,0,0.5);vertical-align:middle;text-align:center;">
<div class="bordercolor" id="bordercolor">
<div id="text" class="text">
</div>
</div>
<div style="position:absolute;bottom:0px;left:0px;opacity:0.5;padding:4px;font-size:8pt;text-align:left;">(c) Orteil 2011<br>proudly hosted by <a href="http://dashnet.org">dashnet.org</a></div>
</td></tr></table>
</td></tr></table>

<script>
Nodes["main"].show();

function hsvToRgb(h, s, v){
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    switch(i % 6){
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }

    return [r * 255, g * 255, b * 255];
}


var t=0;
function Rainbow()
{
var Col=hsvToRgb((t%100)/100,1,1);
document.getElementById("bordercolor").style.backgroundColor="rgb("+Math.floor(Col[0])+","+Math.floor(Col[1])+","+Math.floor(Col[2])+")";
//document.getElementById("text").innerHTML="rgb("+Math.floor(Col[0])+","+Math.floor(Col[1])+","+Math.floor(Col[2])+")";
t++;
setTimeout("Rainbow();",1000/10);
}

Rainbow();

</script>

使用JQuery的简短解释和我自己的例子。不需要JQuery UI。请参阅工作示例：https://jsfiddle.net/Twisty/9nkc7sd6/

<强> HTML

<div id="wrapper">
  <div class="bordercolor" id="bordercolor">
    <div id="text" class="text">
      I am a pretty pretty rainbow!
      <p><span id="hsv"></span>, <span id="rgb"></span></p>
    </div>
  </div>
</div>

<强> CSS

#wrapper {
  width: 100%;
  background: #000;
  margin: 0;
  padding: 20px;
}

#bordercolor {
  width: 50%;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
}

<强> JQuery的

$(document).ready(function() {
  function hsvToRgb(h, s, v) {
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    switch (i % 6) {
      case 0:
        r = v, g = t, b = p;
        break;
      case 1:
        r = q, g = v, b = p;
        break;
      case 2:
        r = p, g = v, b = t;
        break;
      case 3:
        r = p, g = q, b = v;
        break;
      case 4:
        r = t, g = p, b = v;
        break;
      case 5:
        r = v, g = p, b = q;
        break;
    }

    return "rgb(" + Math.floor(r * 255) + "," + Math.floor(g * 255) + "," + Math.floor(b * 255) + ")";
  }
  var t = 0;
  setInterval(function() {
    var col = hsvToRgb((t % 100) / 100, 1, 1);
    $("#bordercolor").css("background-color", col);
    $("#hsv").html("hsv(" + ((t % 100) / 100) + ",1,1)");
    $("#rgb").html(col);
    t++;
  }, 1000 / 10);
});

这里的重要功能是色调饱和度值（HSV）到红绿蓝（RGB）hsvToRgb()功能。这创建了我们需要的颜色代码，您可以在此处了解更多信息：https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB

为此，我们实际上只是在Hue上循环并且每100 ms或1/10秒将其递增1/100（1％）。这将在10秒内循环显示所有100种色调。

在我们循环播放时，我们使用它的ID选择器调整元素background-css的CSS div。

JQuery UI中的Color Animation在哪里？

1 个答案: