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 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
javascript读写json示例
Apr 11 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
深入浅析javascript函数中with
2018/10/28 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Python中字符串对齐方法介绍
2015/05/21 Python
Python类属性的延迟计算
2016/10/22 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python读取各种文件数据方法解析
2018/12/29 Python
Django框架自定义session处理操作示例
2019/05/27 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
python利用opencv保存、播放视频
2020/11/02 Python
高级护理专业毕业生推荐信
2013/12/25 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
大型会议策划方案
2014/05/17 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript