彩色文字跳动输出特效 前言{alert type="success"}　　冲浪的时候，看见一位仁兄泽楠云的彩色文字跳动输出函数，玩起来很有意思，为了方便调用，班门弄斧做了一些小的修改，所以做此记录。作者原文章链接在下文。{/alert}效果{alert type="success"}{/alert}代码{alert type="success"}原生函数/** * @ Param _this : JS对象 * @ Param freeze : 出现之后不再闪动消失的部分 * @ Param con : 一直保持闪动的正文 */ function ContTransition(_this, freeze = '', con = '') { if (!(freeze && con)) return false; let content = [con].map(function (v) { return v + ''; }),a = 2,g = 1,s = 5,d = 75, b = ['rgb(110,64,170)','rgb(150,61,179)','rgb(191,60,175)','rgb(228,65,157)','rgb(254,75,131)','rgb(255,94,99)','rgb(255,120,71)','rgb(251,150,51)','rgb(226,183,47)','rgb(198,214,60)','rgb(175,240,91)','rgb(127,246,88)','rgb(82,246,103)','rgb(48,239,130)','rgb(29,223,163)','rgb(26,199,194)','rgb(35,171,216)','rgb(54,140,225)','rgb(76,110,219)','rgb(96,84,200)', ], c = {text: '',prefixP: -s,skillI: 0,skillP: 0,direction: 'forward',delay: a,step: g, }; (function auto() { let t = content[c.skillI]; c.step ? c.step-- : ((c.step = g), c.prefixP < freeze.length ? (c.prefixP >= 0 && (c.text += freeze[c.prefixP]), c.prefixP++) : 'forward' === c.direction ? c.skillP < t.length ? ((c.text += t[c.skillP]), c.skillP++) : c.delay ? c.delay-- : ((c.direction = 'backward'), (c.delay = a)) : c.skillP > 0 ? ((c.text = c.text.slice(0, -1)), c.skillP--) : ((c.skillI = (c.skillI + 1) % content.length), (c.direction = 'forward'))), (_this.textContent = c.text), _this.appendChild( (function (iv) { for ( var n = document.createDocumentFragment(), i = 0; iv > i; i++ ) { var l = document.createElement('span'); (l.textContent = String.fromCharCode(94 * Math.random() + 33)), (l.style.color = b[Math.floor(Math.random() * b.length)]), n.appendChild(l); } return n; })( c.prefixP < freeze.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP) ) ), setTimeout(auto, d); })(); }JQ扩展方法/** * @ Param freeze : 出现之后不再闪动消失的部分 * @ Param con : 一直保持闪动的正文 */ $.fn.ContTransition = function (freeze = '', con = '') { if (!(freeze && con)) return false; _this = this[0]; let content = [con].map(function (v) { return v + ''; }),a = 2,g = 1,s = 5,d = 75, b = ['rgb(110,64,170)','rgb(150,61,179)','rgb(191,60,175)','rgb(228,65,157)','rgb(254,75,131)','rgb(255,94,99)','rgb(255,120,71)','rgb(251,150,51)','rgb(226,183,47)','rgb(198,214,60)','rgb(175,240,91)','rgb(127,246,88)','rgb(82,246,103)','rgb(48,239,130)','rgb(29,223,163)','rgb(26,199,194)','rgb(35,171,216)','rgb(54,140,225)','rgb(76,110,219)','rgb(96,84,200)', ], c = {text: '',prefixP: -s,skillI: 0,skillP: 0,direction: 'forward',delay: a,step: g, }; (function auto() { let t = content[c.skillI]; c.step ? c.step-- : ((c.step = g), c.prefixP < freeze.length ? (c.prefixP >= 0 && (c.text += freeze[c.prefixP]), c.prefixP++) : 'forward' === c.direction ? c.skillP < t.length ? ((c.text += t[c.skillP]), c.skillP++) : c.delay ? c.delay-- : ((c.direction = 'backward'), (c.delay = a)) : c.skillP > 0 ? ((c.text = c.text.slice(0, -1)), c.skillP--) : ((c.skillI = (c.skillI + 1) % content.length), (c.direction = 'forward'))), (_this.textContent = c.text), _this.appendChild( (function (iv) { for ( var n = document.createDocumentFragment(), i = 0; iv > i; i++ ) { var l = document.createElement('span'); (l.textContent = String.fromCharCode(94 * Math.random() + 33)), (l.style.color = b[Math.floor(Math.random() * b.length)]), n.appendChild(l); } return n; })( c.prefixP < freeze.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP) ) ), setTimeout(auto, d); })(); };{/alert}参考链接{alert type="info"}原文链接 : https://iizny.com/1084/{/alert}