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. JMeter--一、安装JMeter

    Apache JMeter是Apache组织开发的基于Java的接口和性能测试工具. 作用: 1.能够对HTTP和FTP服务器进行压力和性能测试, 也可以对任何数据库进行同样的测试(通过JDBC). ...

  2. java反射 之 反射基础

    一.反射 反射:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为 ...

  3. MongoDB 聚合操作

    在MongoDB中,有两种方式计算聚合:Pipeline 和 MapReduce.Pipeline查询速度快于MapReduce,但是MapReduce的强大之处在于能够在多台Server上并行执行复 ...

  4. 当GitHub把我当成DDos攻击者拉进了黑名单中。。。

    Github黑名单自救+快速稳定FQ 异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 原因:项目冲突,没有先更新后提交,他自行更 ...

  5. php的基础

    js是前段脚本语言 php是后端脚本语言 一.所建的文件都要存在wap下的www里面 二.所有的文件名都不能包含中文 三.通过输入 localhost/www下的文件名称,可以浏览 四.在DW内新建站 ...

  6. .NET平台开源项目速览(8)Expression Evaluator表达式计算组件使用

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Expression Evaluator验证组件.那里只是概述了一下,并没有对其使用和强大功能做 ...

  7. Android探索之ContentProvider熟悉而又陌生的组件

    前言: 总结这篇文章之前我们先来回顾一下Android Sqlite数据库,参考文章:http://www.cnblogs.com/whoislcj/p/5506294.html,Android程序内 ...

  8. 探讨Android中的内置浏览器和Chrome

    1.Android默认浏览器和Chrome的区别 Android出厂自带的浏览器:安卓WebKit浏览器,也成内置浏览器或者默认浏览器. 安卓WebKit不是Chrome.Chrome浏览器在它的用户 ...

  9. 数据可视化-EChart2.0.0使用中遇到的2个问题

    之前项目中都是使用FusionChart和HighChart,基本都是没有购买商业许可.然后现在开发的系统需要交付给客户使用.所以现在图表控件不能直接使用FusionChart和HighChart,通 ...

  10. 在Windows中安装NodeJS的正确姿势

    NodeJS已经非常流行了,而且可以预见他将继续受到追捧.这确实是一个不错的创举,想想看他现在能做什么吧 1.服务器程序(典型的就是用来做网站或者restful服务,主打就是多线程,非阻塞,最后,一个 ...