Js文字特效—文字段逐个变色循环
自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>文字段逐个变色循环特效</title>
- </head>
- <body>
- <a href="#" style="text-decoration:none">
- <script type="text/javascript">
- //判断是否为IE浏览器,这一步可以不要
- function isIe(){
- return ("ActiveXObject" in window);
- }
- //全局变量
- var words="请点我这里!";
- var n=0;
- var flashing;
- var temp=[];
- document.write('<B><font size="12px" color="red">'); //输出html元素标签等内容
- //依次改变words的格式
- for(index=0;index<words.length;index++){ //将字符串拆分成字符单位处理
- document.write('<span id="neonLight" style="font-family:Verdana,Arial;font-size:18px;">'+words.charAt(index)+' </span>');
- }
- document.write("</font></B>"); //输出html元素标签内容
- temp=document.getElementsByTagName("span");
- //逐渐变色
- function neon(){
- //起始为红色
- if(n==0){
- for(i=0;i<temp.length;i++){
- temp[i].style.color="red";
- }
- }
- //依次变为蓝色
- if(n<temp.length){
- temp[n].style.color="blue";
- n++;
- }else{ //变完回到初始状态
- n=0;
- }
- }
- //启动函数
- function beginNeon(){
- flashing=setInterval("neon()",1500 ); //每隔1.5秒启动
- }
- beginNeon();
- </script></a>
- </body>
- </html>
这里在推荐一个介绍JS知识体系结构十分给力的站点,可以当平时的参考工具表 —http://dreamdesign.csrjgzs.com/Article/ShowArticle.asp?/4032-1.html
Js文字特效—文字段逐个变色循环的更多相关文章
- 7款震撼人心的HTML5CSS3文字特效
1.HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式 ...
- 7款震撼人心的HTML5文字特效
1.CSS3五彩文字特效 文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加 ...
- HTML5/CSS3(PrefixFree.js) 3D文字特效
之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- JS文字特效:彩色滚动变幻效果,只适合少量的文字。(过多对页面有影响)
JS代码如下: 代码具体是在哪里的我不知道但是我的有道云上有.如有哪位朋友知道,还望联系下,添加出处. <div id="chakhsu"></div> & ...
- HTML5火焰文字特效DEMO演示
效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:
- HTML5火焰文字特效DEMO演示---转载
只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- CSS3火焰文字特效制作教程
原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...
- PS软件操作应用—文字特效
前 言 JRedu 在图像调整和文字工具的分享文章中,对文字工具做了简单的介绍,包括了文字的字体.字号大小.颜色以及字间距行距等等的设置和修改,都是一些基本的功能,在这次的分享中我们介绍下文字特 ...
随机推荐
- ZEALER背后的乐视云视频
ZEALER是我非常喜欢的一个测评网站,经常访问看看手机.电动牙刷及机械键盘的测试视频,非常欣赏王自如的数据化测评理念.敬畏之心,以及不祛痘的视频. 刚好最近对网络视频应用比较感兴趣,觉得ZEALER ...
- C#部分的总结
经过本次考试暴露出一些问题,面对一些概念性和文字性的基础知识,仍然不够细心,出现各种不应该的错误, 虽然平时学习中,实际操作写代码比较顺利,但基础知识和概念仍不可少,这在将来面试上也是重要的一部分.在 ...
- 【前台 submit的重复提交 错误】submit的重复提交
错误表现: 会表现出来:ajax执行成功但是时而会进回调函数,时而不会进入回调函数. 分析原因: 页面的表达提交使用submit,然后又对这个提交按钮绑定一个点击事件,使用ajax来和后台进行交互,这 ...
- Tomcat环境配置部署测试环境及架构
Tomcat环境配置已经在前面介绍过了,这边就为童鞋们介绍下对于Tomcat的架构是怎么样的! Tomcat的架构包含(bin.conf.lib.logs.temp.wenapps.work)等文件夹 ...
- LoadRunner检查点
web_reg_find("Text=ABC", "SaveCount=abc_count", LAST);51Testing软件测试网V?2Rs.J Gmdw ...
- JavaScrip入门(3)
函数: var m2=function(){ console.log('2222'); } console.log(typeof(m2)); 输出结果:test.html:31 function js ...
- java中HashMap详解
HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员,其中 HashMap 是 Map 接口的常用实现类,HashSet 是 Set 接口的常用实 ...
- shell-bash学习01基础、打印、环境变量
基础 终端提示符: username@hostname$; $: 一般用户 #:root用户 运行脚本 Bash执行: * bash script.sh; 直接运行: 脚本开头添加shebang起始: ...
- 使用GDB 修改MySQL参数不重启
link:http://blog.chinaunix.net/uid-20785090-id-4016315.html mysql很多参数都需要重启才能生效,有时候条件不允许,可以使用gdb作为最后的 ...
- [Noi2015]软件包管理器 题解
题目大意: 有n个软件安装包,除第一个以外,其他的要在另一个安装包的基础上安装,且无环,问在安装和卸载某个软件包时,这个操作实际上会改变多少个软件包的安装状态. 思路: 可构成树,用树链剖分,线段树. ...