Js实现滚动变色的文字效果，在效果展示页面，可看到文字在交替变色显示，以吸引人的注意，效果真心不错哦，把代码拷贝到你的网站后，修改成想要的文字就OK了。

查看效果：http://keleyi.com/a/bjad/bd55blos.htm

以下是源代码：

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>滚动变色的文字js特效-柯乐义</title>

 </head>

 <body>

 <div style="width:736px;">

 请注意下方的文字，部分文字染成红色，且红色循环移动。 <a href="http://keleyi.com/a/bjad/bd55blos.htm" target="_blank">原文</a>

 </div>

 <script type="text/javascript">

 var message="欢迎访问柯乐义网，这里有web前端等学习资料。"

 var neonbasecolor="#333333"

 var neontextcolor="#ff0000"

 var neontextcolor2 = "#ff3333"

 var flashspeed=100

 var flashingletters=8

 var flashingletters2=2

 var flashpause=0

 var n=0

 if (document.all||document.getElementById){

 document.write('<font color="'+neonbasecolor+'">')

 for (m=0;m<message.length;m++)

 document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

 document.write('</font>')

 }

 else

 document.write(message)

 function crossref(number){

 var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)

 return crossobj

 }

 function neon(){

 if (n==0){

 for (m=0;m<message.length;m++)

 crossref(m).style.color=neonbasecolor

 }

 crossref(n).style.color=neontextcolor

 if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2

 if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor

 if (n<message.length-1)

 n++

 else{

 n=0

 clearInterval(flashing)

 setTimeout("beginneon()",flashpause)

 return

 }

 }

 function beginneon(){

 if (document.all||document.getElementById)

 flashing=setInterval("neon()",flashspeed)

 }

 beginneon()

 </script>

 <div><br /><a href="http://keleyi.com" target="_blank">keleyi.com</a></div>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

滚动变色的文字js特效的更多相关文章

  1. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. 鼠标点击自定义文字展现特效JS代码

    JS特效使用方法 只需将如下JS代码放到</body>之前就好了 var a_idx = 0; jQuery(document).ready(function($) { $("b ...

  3. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  4. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  5. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  7. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

  8. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  9. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

随机推荐

  1. VS web项目 基于IIS调试和模拟域名调试

    1.安装IIS 2.注册.net framework 到IIS 打开程序-运行-cmd:输入一下命令重新注册IISC:\WINDOWS\Microsoft.NET\Framework\v4.0.303 ...

  2. easyui datagrid cell title换行

    " " title="' +row.TaskName + "

  3. Spark中决策树源码分析

    1.Example 使用Spark MLlib中决策树分类器API,训练出一个决策树模型,使用Python开发. """ Decision Tree Classifica ...

  4. 深入理解javascript中的焦点管理

    × 目录 [1]焦点元素 [2]获得焦点 [3]失去焦点[4]焦点事件 前面的话 焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文 ...

  5. 虚拟 ​router 原理分析- 每天5分钟玩转 OpenStack（101）

    上一节我们创建了虚拟路由器"router_100_101",并通过 ping 验证了 vlan100 和 vlan101 已经连通. 本节将重点分析其中的原理. 首先我们查看控制节 ...

  6. ES6 - Note2：解构赋值

    ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...

  7. 教你如何塑造JavaScript牛逼形象

    如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...

  8. MyCAT实现MySQL的读写分离

    在MySQL中间件出现之前,对于MySQL主从集群,如果要实现其读写分离,一般是在程序端实现,这样就带来一个问题,即数据库和程序的耦合度太高,如果我数据库的地址发生改变了,那么我程序端也要进行相应的修 ...

  9. 深入理解 OWIN 中的 Host 和 Server

    The Open Web Interface for .NET (OWIN),注意单词为大写,之前好像都写成了 Owin,但用于项目的时候,可以写成:Microsoft.Owin.*. OWIN 体系 ...

  10. 开发中常用js记录（二）

    (1)获得asp.net控件的value值 document.getElementById('<%=SUKid.ClientID %>').value (2)获得选中值 $('#selec ...