colortext.js文档

评论资讯 [ 总 424 则 ]

·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27

友情链接

◇ 午后时光
◇ 花潮论坛
◇ 马黑永硕网盘
◇ 老站
◇ 随意云
◇ css-doodle中文版
◇ HTML官方文档
◇ Web代码格式化工具
◇ 清音陋屋
◇ cubic-bezier

网站统计

·前端三套件 : 105
·JS插件 : 46
·黑石音画 : 318
·代码集锦 : 50
·小工具集合 : 23
·网友作品精选 : 6
·svgdr : 26

·今日访问 : 193
·页面点击 : 224
·当前在线 : 12

colortext.js文档

位置: 首页 > JS插件[ 发布时间: 2024.6.17 作者: 马黑阅读: 205 ]

colortext.js 用于给web文档中 class="c7" 的所有html元素渲染彩色字效果，演示如下：

君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

Hello Javascript!

使用方法：

方法一：适用于自由环境

// 自定义颜色数组：省略则使用默认七彩色

var hlColors = ['red','green','blue','orange','magenta'];

</script>

上法，如果使用默认颜色，代码仅需第6行。若使用自己定义的颜色，设置颜色的代码块应放在引用资源文档之前，颜色数量不限（下法同）。

方式二：适用于dz论坛

var sf = document.createElement('script');

sf.charset = 'utf-8';

sf.src = 'https://638183.freep.cn/638183/web/js2024/colortext.js';

document.body.appendChild(sf);

// 自定义颜色数组：可以省略

var hlColors = ['red','green','blue','orange','magenta'];

</script>

此法，自定义颜色数组放前放后都生效。

正确引用资源文档后，页面所有的 class="c7" 的元素，文本都将是出彩的，例如如下的div和h2：

<div class="c7">DIV盒子输出彩色字</div>

<h2 class="middle c7">莫道君行早</h2>

上面代码，h2标签的class有两个名称，一个是 middle，一个是 c7，后者是渲染彩色字的标识。

着色的效果：

colortext渲染彩色字的效果取决于浏览器对 ::highlight() 伪元素的支持与否，若支持：

每一个字，含字母、标点等，其着色机制是从预定义的颜色中随机抽去的，每一个字节一种颜色，着色速度快、性能消耗低。

若不支持：

使用渐变背景着色方法，具体是使用重复性线性渐变背景+前景色透明来实现，按 200*40px 的尺寸重复渐变，列的颜色一致，行的颜色随机平铺并以 200*40 为单位重复往右铺开。背景渐变作用于文本整体而非单个文字，可能出现一个字出现多种颜色的现象。整体性能也很好，资源消耗不算高。

关于兼容问题：

colortext 已经考虑了主要的兼容性问题，但如果浏览器连 background-clip 都不支持，那得通过一个字一个字地加上 span 标签，资源消耗偏大、运行速度偏慢，很遗憾，colortext 没有使用此实现机制。

最后给出一个论坛使用的完整实例代码：

<style>

#tBox { font-size: 20px; }

</style>

花潮论坛<br>

条条道路通水吧

</div>

var sf = document.createElement('script');

sf.charset = 'utf-8';

sf.src = 'https://638183.freep.cn/638183/web/js2024/colortext.js';

document.body.appendChild(sf);

var hlColors = ['red','green','blue'];

</script>

前一篇: 《碧瑶 - 小池塘》所使用的JS资源相关说明
下一篇: 原生lrc歌词同步帖子模板

发表评论:

评论列表 [1条]

#1 | 悄然于 2024-6-17 12:39 发布: 果然火狐和百分着色效果完全不一样。。火狐对对 ::highlight() 伪元素不支持，所以渐变出现一个字多种色，好像是一片一片的上色。。百分是一个字一个字上色，字字不同。