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 相关文章推荐
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
一个程序下载的管理程序(二)
2006/10/09 PHP
php访问查询mysql数据的三种方法
2006/10/09 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python实现音乐下载器
2018/04/15 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
花卉与景观设计系大学生求职信
2013/10/01 职场文书
会计自我鉴定范文
2013/10/06 职场文书
销售员态度差检讨书
2014/10/26 职场文书
社区节水倡议书
2015/04/29 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android