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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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数据库备份还原类分享
2014/03/20 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
python写的一个文本编辑器
2014/01/23 Python
Python装饰器的函数式编程详解
2015/02/27 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
学习和使用python的13个理由
2019/07/30 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
土建资料员岗位职责
2014/01/04 职场文书
文艺晚会主持词
2014/03/24 职场文书
银行委托书范本
2014/09/28 职场文书
挂靠协议书
2015/01/27 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技