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打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
jquery实现聊天机器人
Feb 08 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
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python 获取本机ip地址的两个方法
2013/02/25 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python递归实现快速排序
2018/08/18 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python实现批处理文件
2020/07/28 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
实习生自我鉴定
2013/12/12 职场文书
司机辞职报告范文
2014/01/20 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
通知格式
2015/04/27 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
七年级作文之游记
2019/12/11 职场文书