问题:

I would like to generate multicoloured text for various links, with a random assignment of colours to individual letters, from a pre-specified array of colours, which would change on hovering over the div with the text in. I am thinking a jQuery plugin/script would be the way to go.

I am wondering if such a plugin, or a close approximation, exists.

Thanks,

Nick

回答1:

Ok i whip up an example using jquery.

first your text

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

then the 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];
}

Heres the jsFiddle Example

Note: i did not do the hover but I guessing you can take it from here :)

回答2:

You could try this:

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

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

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