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 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
浅谈Vue的computed计算属性
Mar 21 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学习笔记之数组篇
2011/06/28 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
JS跨域总结
2012/08/30 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
详解Nodejs mongoose
2018/06/10 NodeJs
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
Python绘制KS曲线的实现方法
2018/08/13 Python
Python实现图片添加文字
2019/11/26 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
数学教学随笔感言
2014/02/17 职场文书
个人授权委托书
2014/04/03 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
寒山寺导游词
2015/02/03 职场文书
旷工辞退通知书
2015/04/17 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
银行培训心得体会范文
2016/01/09 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技