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异步编程:异步数据收集的具体方法
Aug 19 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 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加密扩展库Mcrypt安装和实例
2013/11/10 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
总监职责范文
2013/11/09 职场文书
高中地理教学反思
2014/01/29 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
留守儿童工作方案
2014/06/02 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
迎新生标语大全
2014/10/06 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
食品安全责任书范本
2015/05/09 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
初中信息技术教学反思
2016/02/16 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
Golang 对es的操作实例
2022/04/20 Golang
MYSQL如何查看操作日志详解
2022/05/30 MySQL