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所必须要知道的一些
Mar 07 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
几种tab切换详解
Feb 03 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Python实现查找系统盘中需要找的字符
2015/07/14 Python
python运行时间的几种方法
2016/06/17 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python调用webservice接口的实现
2019/07/12 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
自我评价的写作规则
2014/01/06 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
活动总结怎么写
2014/04/28 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers