javascript实现的动态文字变换

实现文字渐淡显示的效果代码如下：

　　<html> 
　　<head>
　　<script> 
　　<!-- 
　　function HelpArray(len){this.length=len } 
　　HelpText= new HelpArray(5) 
　　HelpText[0]="视点闪客" 
　　HelpText[1]="智慧无边" 
　　HelpText[2]="魅力无限" 
　　HelpText[3]="十二亿中国人的最爱"
　　HelpText[4]="http://visionflash.blog.sohu.com" 
　　ScriptText=new HelpArray(5)
　　//*定义文本数组，一共是五段文本*// 
　　var i = -1 
　　function playHelp() { 
　　if (i==4) { i=0 } 
　　else { i++ } 
　　div1.filters[0].apply() 
　　div1.innerText=HelpText[i] 
　　div1.filters[0].play() 
　　mytimeout=setTimeout("playHelp()",2500)} 
　　//*定义play函数，并且设置了时间间隔*//
　　--> 
　　</script> 
　　<style> <!-- 
　　#div1{position:absolute;top:20;left:20;width:480;height:200; 
　　　　　font-family:行书体; color:red;font-size:40;
　　　　　font-weight:bold;text-align:center; 
　　　　　filter:revealtrans(transition=12,duration=2) } 
　　//*设置显示转换滤镜*//
　　　　　　 --> 
　　</style> </head> 
　　<body onload="playHelp()"> 
　　<div id="div1" onload="playHelp()"> </div> 
　　</body> 
　　</html>

赞 (0)

相关推荐

  • js实现input框文字动态变换显示效果

    js实现input框文字动态变换显示效果

    本文实例讲述了js实现input框文字动态变换显示效果.分享给大家供大家参考.具体如下: 这里演示js实现INPUT框中的特殊显示效果,一些文字慢慢交替显示,最终显示出完整的文字,需要显示的文字预先保存在数组中,依次调用显示,有意思吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-txt-rand-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • javascript实现状态栏中文字动态显示的方法

    本文实例讲述了javascript实现状态栏中文字动态显示的方法.分享给大家供大家参考,具体如下: <script> var child = window.open("information.html","_blank","width=200,height=200,toolbar=no"); function closeChild(){ if(!child.closed){ child.close(); } } //设置间隔1秒钟,调

  • 基于jQuery实现文字打印动态效果

    本文实例为大家分享了jQuery实现文字打印动态效果的具体代码,供大家参考,具体内容如下 主体html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打印文字效果</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"

  • js 动态文字滚动的例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>这是一个动态Java

  • jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】

    jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】

    本文实例讲述了jQuery实现的动态文字变化输出效果.分享给大家供大家参考,具体如下: 演示效果图如下: 1.完整实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Typ

  • javascript实现的动态文字变换

    实现文字渐淡显示的效果代码如下: <html>  <head> <script>  <!--  function HelpArray(len){this.length=len }  HelpText= new HelpArray(5)  HelpText[0]="视点闪客"  HelpText[1]="智慧无边"  HelpText[2]="魅力无限"  HelpText[3]="十二亿中国人的

  • jQuery实现动态文字搜索功能

    jQuery实现动态文字搜索功能

    先简单讲一下需求:页面中会列出多行个人信息记录,为方便查找,在顶层增加一个搜索栏,可根据用户姓名查找记录. 如果只想查看代码,可跳过分析过程,文章底部提供了完整的代码. 以下是我的编写过程: 动态页面,多条记录均由forEach生成,结构如下: <form name="userForm"> <table style="width:200px;"> <thead> <tr> <th> </th>

  • JavaScript实现页面动态验证码的实现示例

    JavaScript实现页面动态验证码的实现示例

    引言: 现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现.我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看. 效果图: 实现思路: 把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码: 把验证码渲染出来(一个一个的渲染): 绘制一定数量的干扰线,随机颜色: 输入验证码,输入4位以后去验证,正确显示钩,错误显示叉并且刷新验证码. 编写构造函数 文本构造函数 //文字的构造函数 function Te

  • JavaScript实现外溢动态爱心的效果的示例代码

    JavaScript实现外溢动态爱心的效果的示例代码

    还在为节日送女朋友什么礼物而烦恼吗?最近用JavaScript制作了一个外溢动态爱心的效果,还可以在爱心上填写你想要的文字!快学习一下给自己女朋友也diy一个吧 效果演示 源码介绍 ( function() { var b=0; var c=["ms","moz","webkit","o"]; for(var a=0;a<c.length&&!window.requestAnimationFrame;++

  • JavaScript中 创建动态 QML 对象的方法

    一.动态创建对象 有两种方法可以从 JavaScript 动态创建对象: 调用 Qt.createComponent() 动态创建 Component 对象 使用 Qt.createQmlObject() 从 QML 字符串创建对象 虽然动态创建的对象可以与其他对象一样使用,但它们在 QML 中没有 id. 1.1.动态创建组件 可以调用它的 createObject() 方法来创建该组件的一个实例.这个函数可以接受两个参数: 第一个是新对象的父对象.父对象可以是图形对象(即 Item 类型)或

  • JavaScript canvas绘制动态圆环进度条

    JavaScript canvas绘制动态圆环进度条

    本文实例为大家分享了JavaScript canvas绘制动态圆环进度条的具体代码,供大家参考,具体内容如下 由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) {             /*                 @drawing_elem: 绘制对象                 @percent:绘制圆环百分比, 范围[0, 100]            

  • Javascript基础_标记文字的实现方法

    Javascript基础_标记文字的实现方法

    Javascript基础_标记文字的实现方法  1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn4Font</title> </head> <body> <p> 元素 b -- <b>

  • JavaScript 通过Ajax 动态加载CheckBox复选框

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark

随机推荐