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

2023-11-30前端开发问题
7

本文介绍了用于生成多色文本的 jQuery 插件,在悬停时会改变颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我想为各种链接生成多色文本,从预先指定的颜色数组中为单个字母随机分配颜色,当将鼠标悬停在带有文本的 div 上时,颜色会发生变化.我在想一个jQuery 插件/脚本将是要走的路.

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.

谢谢,

尼克

推荐答案

好的,我用 jquery 举个例子.

Ok i whip up an example using jquery.

首先是你的文字

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

然后是javascript:

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

这是 jsFiddle 示例

Heres the jsFiddle Example

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

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

这篇关于用于生成多色文本的 jQuery 插件,在悬停时会改变颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

layui中表单会自动刷新的问题
layui中表单会自动刷新的问题,因为用到layui的表单,遇到了刷新的问题所以记录一下: script layui.use(['jquery','form','layer'], function(){ var $ = layui.jquery, layer=layui.layer, form = layui.form; form.on('submit(tijiao)', function(data){ a...
2024-10-23 前端开发问题
262

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

ExecJS::ProgramError: SyntaxError: 保留字“function"
ExecJS::ProgramError: SyntaxError: Reserved word quot;functionquot;(ExecJS::ProgramError: SyntaxError: 保留字“function)...
2024-04-20 前端开发问题
13

无限滚动和 will_paginate 多次附加项目的“下一页"
Infinite scroll and will_paginate appending the #39;next page#39; of items multiple times(无限滚动和 will_paginate 多次附加项目的“下一页)...
2024-04-20 前端开发问题
8