Js实现滚动变色的文字效果


Posted in Javascript onJune 16, 2014

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

以下是源代码:

<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>
Javascript 相关文章推荐
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 #Javascript
Javascript图片上传前的本地预览实例
Jun 16 #Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 #Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 #Javascript
javascript进行数组追加方法小结
Jun 16 #Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 #Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
You might like
mysql总结之explain
2012/02/27 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
决策树的python实现方法
2014/11/18 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
基于python实现名片管理系统
2018/11/30 Python
python Kmeans算法原理深入解析
2019/08/23 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
单位承诺书格式
2014/05/21 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
网聊搭讪开场白
2015/05/28 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫