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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 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
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
Js面试算法详解
2018/04/08 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
小学校园活动策划
2014/01/30 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
机械操作工岗位职责
2014/08/08 职场文书
售房协议书范本2014
2014/10/23 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
护士先进个人总结
2015/02/13 职场文书
大国崛起观后感
2015/06/02 职场文书
城南旧事电影观后感
2015/06/16 职场文书
英语读书笔记
2015/07/02 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
运动员入场词
2015/07/18 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python