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 RadioButtonList获取选中值
Apr 09 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php之Memcache学习笔记
2013/06/17 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python函数和模块的使用总结
2019/05/20 Python
解决Python中回文数和质数的问题
2019/11/24 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
网络技术专业求职信
2014/05/02 职场文书
安全生产演讲稿
2014/05/09 职场文书
入党函调证明材料
2014/12/24 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
Python快速实现一键抠图功能的全过程
2021/06/29 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技