用于生成多色文本的jQuery插件,可在悬停时更改颜色

时间:2012-05-03 10:16:15

标签: jquery css plugins fonts hover

我想为各种链接生成多色文本,从预先指定的颜色数组中随机分配颜色到单个字母,这会在将文本悬停在div上时发生变化。我在想jQuery插件/脚本将是最佳选择。

我想知道是否存在这样的插件或近似值。

谢谢,

尼克

2 个答案:

答案 0 :(得分:1)

好的我用jquery打造了一个例子。

首先是你的文字

<p id="example">Multi color me</p>​

然后是javascript:

$(document).ready(function() {
  var test = $("#example").text().split('');

    var result = "";
    var i = 0;
    for(i=0; i < test.length; i++) {
        result += "<span style='color:"+getColor()+"'>"+test[i]+"</span>";
    }
    $("#example").html(result);      
});

function getColor() {
    var colList = ['#00FF00', '#FF0000','#0000FF'];

    var i = Math.floor((Math.random()*colList.length));
  return colList[i];
}​

继承人jsFiddle Example

注意:我没有做悬停,但我猜你可以从这里开始:)

答案 1 :(得分:0)

你可以试试这个:

   $('a').on('hover', function( {
      $(this).css('color', getRandomColor());
     })
   );

function getRandomColor() {
  var myAwesomeColorList['#ccc', '#fff'];

  return myAwesomeColorList[Math.floor((Math.random()*myAwesomeColorList.length))]
}