colortext.js文档

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

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

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

Hello Javascript!

使用方法:

方法一:适用于自由环境

<script>     // 自定义颜色数组 :省略则使用默认七彩色 var hlColors = ['red','green','blue','orange','magenta']; </script>   <script charset="utf-8" src="https://638183.freep.cn/638183/web/js2024/colortext.js"></script>

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

方式二:适用于dz论坛

<script>     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> <div id="tBox" class="c7"> 花潮论坛<br> 条条道路通水吧 </div> <script> 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() 伪元素不支持,所以渐变出现一个字多种色,好像是一片一片的上色。。 百分是一个字一个字上色,字字不同。

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com