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. C#设计模式-装饰者模式

    在软件开发中,我们经常想要对一类对象添加不同的功能,例如要给手机添加贴膜,手机挂件,手机外壳等,如果此时利用继承来实现的话,就需要定义无数的类,如StickerPhone(贴膜是手机类).Access ...

  2. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  3. Security4：Role 和 Permission

    Grants permissions on a securable to a principal.  The general concept is to GRANT <some permissi ...

  4. WaitType：SOS_SCHEDULER_YIELD

    今天遇到一个query,处于SOS_SCHEDULER_YIELD 状态,physical IO 不增加,CPU的使用一直在增长.当一个sql query长时间处于SOS_SCHEDULER_YIEL ...

  5. Ubuntu 14.04 64bit 安装tensorflow（GPU版本）

    本博客主要用于在Ubuntu14.04 64bit 操作系统上搭建google开源的深度学习框架tensorflow. 0.安装CUDA和cuDNN 如果要安装GPU版本的tensorflow,就必须 ...

  6. c++ stringstream（老好用了）

    前言: 以前没有接触过stringstream这个类的时候,常用的字符串和数字转换函数就是sscanf和sprintf函数.开始的时候就觉得这两个函数应经很叼了,但是毕竟是属于c的.c++中引入了流的 ...

  7. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  8. Android微信分享图片大于32k进行压缩

    微信分享视频的时候,需要传一个图片数组,大小不能大于32k. 解决方案:使用Bitmap自带的compress方法解决了这个问题. 源码如下: <span style="font-si ...

  9. 扩展KMP算法

    一 问题定义 给定母串S和子串T,定义n为母串S的长度,m为子串T的长度,suffix[i]为第i个字符开始的母串S的后缀子串,extend[i]为suffix[i]与字串T的最长公共前缀长度.求出所 ...

  10. [c++] Smart Pointers

    内存管理方面的知识 基础实例: #include <iostream> #include <stack> #include <memory> using names ...