javascript实现的动态文字变换

2016-02-19 09:16 7 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的javascript实现的动态文字变换,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

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

  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

来源:https://www.tulaoshi.com/n/20160219/1590175.html

延伸阅读
标签: Web开发
From: IECN.Net ; Author: 钟钟 /**  * 分页类构造  * 参数 nTotalList: 总条数  * 参数 nPageSize: 每页显示条数  * 参数 nPageNum: 当前页码  * 参数 sPageUrl: 分页链接的URL,页码以[pn]代替,输出时将被替换为实际...
标签: Web开发
style type="text/css"    #oContainer {          width: 600px;          height: 500px;          border: 1px solid menu;   ...
标签: Web开发
在网上看到有不少JS设计模式的示例。 今天参照: http://www.cnblogs.com/iloveu/archive/2009/03/31/1426234.html 写了一下,记录在此,仅作备忘: !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...
标签: Web开发
在 Facebook 上有一个彩蛋: 登录 facebook.com ,点击你首页的任何地方,键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后,再点击页面或滚动一下滚动条,你会发现特殊的变化(如下图),嘿嘿 ^^ 玩过“魂斗罗”的朋友,肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami ...
标签: Web开发
最近看fp比较上瘾。。。JS里的各种奇淫巧计也是不亦乐乎。oliver用单行javascript实现了fp里的memoizaion Bezier.prototype.getLength = function() {   var length = ... // 复杂、expensive的计算   return (this.getLength = function(){return length})(); } 原文讲得比较详细,内存泄漏都考虑到了。地址是 http://ost...

经验教程

612

收藏

23
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部