JS代码如下:

代码具体是在哪里的我不知道但是我的有道云上有。如有哪位朋友知道,还望联系下,添加出处。

<div id="chakhsu"></div>
<script>
var chakhsu = function (r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
} function e() {
return String.fromCharCode(94 * Math.random() + 33)
} function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
} function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[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) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
/*内容自定义*/
var l = "文字特效",
o = ["-专注蓝天计划", "-分享一夜暴富经验", ].map(function (r) {
return r + ""
}), 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};
i()};
chakhsu(document.getElementById('chakhsu'));</script>

JS文字特效:彩色滚动变幻效果,只适合少量的文字。(过多对页面有影响)的更多相关文章

  1. Vue.js大屏数字滚动翻转效果

    ================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

  2. css&js实现顶部banner滚动提示效果

    以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...

  3. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  4. 7款震撼人心的HTML5文字特效

    1.CSS3五彩文字特效 文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加 ...

  5. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  6. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  7. css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

    这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...

  8. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  9. [WPF] 抄抄超强的苹果官网滚动文字特效实现

    1. 前言 今天 ChokCoco 大佬发布了一篇博客 超强的苹果官网滚动文字特效实现,iPhone 我是买不起的,但不妨碍我对抄特效感兴趣,正好我这周安排的工作已经完成了,于是有空练练手实现了一个 ...

随机推荐

  1. [jzoj NOIP2018模拟10.29]

    OI生涯的最高分,来了纪中这么多天,在经历了这么多场“NOIP难度”的模拟赛之后,终于看到了真正的NOIP 今天考场上效率很高,很快码完了全部的题目,留下了足够的时间对拍和...发呆.不得不说看着电脑 ...

  2. 51nod 1066 - Bash游戏,简单博弈

    有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出N和K,问最后谁能赢得比赛. 例如N = 3 ...

  3. python自动化报错

    今天使用python.然而遇见了报错.抓狂的一笔.有说path写错的,有说是...网上查到的资料也是很少.后来突然发现,页面上我暂时能看到的元素可以定位并进行操作.看不到的无法进行...ps此时我没有 ...

  4. linux 安装常用库

    在CentOS安装软件的时候,可能缺少一部分支持库,而报错.这里首先安装系统常用的支持库.那么在安装的时候就会减少很多的错误的出现. [root@bogon 桌面]#  yum install -y ...

  5. 紫书 例题11-4 UVa247 (Floyd判断联通)

    Floyd联通, 然后为了输出联通分量而新建一个图, 让互相可以打电话的建立一条边, 然后dfs输出联通分量就ok了. #include<cstdio> #include<iostr ...

  6. 紫书 习题8-11 UVa 1615 (区间选点问题)

    这个点就是贪心策略中的区间选点问题. 把右端点从大到小排序, 左端点从小到大排序. 每次取区间右端点就可以了, 到不能覆盖的时候就ans++, 重新取点 ps:这道题不考虑精度也可以过 要着重复习一下 ...

  7. 05003_Linux的基本命令

    1.目录结构 Linux的目录结构:Linux各目录及每个目录的详细介绍 链接:Linux各目录及每个目录的详细介绍 密码:84ab 2.LInux的基本命令 (1)目录切换命令 ①root是超级管理 ...

  8. wget 升级

    漏洞描述: Wget是GNU计划开发的一套用于在网络上进行下载的自由软件,是Unix/Linux系统最常用的下载工具,支持通过HTTP.HTTPS以及FTP这三个最常见的TCP/IP协议下载. Wge ...

  9. C#-CLR各版本特点

    来自为知笔记(Wiz) 附件列表 CLR与NET版本关系.png NET框架工作流程.png VS与CLR关系.png

  10. hadoop-15-Ambari进行HDP、zookeeper安装

    hadoop-15-Ambari进行HDP.zookeeper安装 1,登陆server_1:8080 admin/admin 2,命名:Hdp_cluster 3,输入HDP.HDP_Utils 地 ...