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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
JsonProperty 的使用方法详解
Oct 11 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
初品cakephp 入门基础
2012/02/16 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
Vue实现验证码功能
2019/12/03 Javascript
js实现表格数据搜索
2020/08/09 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Python 开发Activex组件方法
2009/11/08 Python
Python函数的周期性执行实现方法
2016/08/13 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
详解Python中的正则表达式
2018/07/08 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
详解python中*号的用法
2019/10/21 Python
python写一个随机点名软件的实例
2019/11/28 Python
python中for in的用法详解
2020/04/17 Python
python中判断文件结束符的具体方法
2020/08/04 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
商务会议邀请函
2014/01/09 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS