<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title>

   文字跳动特效-vico

  </title>

  <style type="text/css">

   #txtDom{ padding: 50px; width:500px; margin: 0 auto; font-size: 16px;

   font-family: "微软雅黑"; line-height: 1.3em; text-indent: 2em;}

  </style>

 </head>

 <body>

  <div id="txtDom">

   要是没有错误和失败，你就不会学到东西；要是没有痛苦，你就不会长大。

   一旦你明白了这些，你就知道了一切事情都是为了某种目的而发生。

   所以不要紧张或者认为生活不公平，因为一切事情都有原因，只有时间能诉说教会了我们什么。

  </div>

  <script type="text/javascript">

   var txtAnim = {

    len: 0,

    txtDom: "",

    arrTxt: [],

    init: function(obj) {

     this.obj = obj;

     this.txtDom = obj.innerHTML.replace(/\s+/g, "");

     this.len = this.txtDom.length;

     obj.innerHTML = "";

     this.addDom();

    },

    addDom: function() {

     for (var i = 0; i < this.len; i++) {

      var spanDom = document.createElement("span");

      spanDom.innerHTML = this.txtDom.substring(i, i + 1);

      this.obj.appendChild(spanDom);

      this.arrTxt.push(spanDom);

     };

     for (var j = 0; j < this.len; j++) {

      this.arrTxt[j].style.position = "relative";

     };

     this.strat();

    },

    strat: function() {

     for (var i = 0; i < this.len; i++) {

      this.arrTxt[i].onmouseover = function() {

       this.stop = 0;

       this.speed = -1;

       var $this = this;

       this.timer = setInterval(function() {

        $this.stop += $this.speed; //0 += -1

        if ($this.stop <= -20) {

         $this.speed = 1;

        }

        $this.style.top = $this.stop + "px";

        if ($this.stop >= 0) {

         clearInterval($this.timer)

         $this.style.top = 0 + "px";

        };

       },

       15);

      };

     }

    }

   }

   var txtDom = document.getElementById("txtDom");

   txtAnim.init(txtDom);

  </script>

 </body>

</html>

　　

js文字效果的更多相关文章

  1. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  2. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  3. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  4. js文字颜色闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Qt qml 模拟iphone slide to unlock 的聚光动画文字效果

    模拟iphone slide to unlock 的聚光动画文字效果    /底层放淡文字    /前景放高亮文字+半透明遮罩    /动画移动遮罩 Author: surfsky.cnblogs.c ...

  6. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  7. js sleep效果

    js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...

  8. as3.0:文字 效果

    //文字描边效果var tf1 = _root.createTextField("tf1", _root.getNextHighestDepth(), 10, 10, 0, 0); ...

  9. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

随机推荐

  1. 面试-Spring理解

    转自http://hui.sohu.com/infonews/article/6331404387079946240 spring呢,是pivotal公司维护的一系列开源工具的总称,最为人所知的是sp ...

  2. PureLayout,使用纯代码写AutoLayout

    为iOS和OS X的自动布局最终的API -- 令人印象深刻的简单,非常强大. PureLayout延伸的UIView /NSView , NSArray,和NSLayoutConstraint与之后 ...

  3. vue面试常被问到的问题整理

    1.Vue的双向数据绑定原理是什么? 答 : vue是采用数据劫持,并且使用发布-订阅者的开发模式.原理是观察者observer通过Object.defineProperty()来劫持到各个属性的ge ...

  4. 第34-3题：LeetCode437. Path Sum III

    题目 二叉树不超过1000个节点,且节点数值范围是 [-1000000,1000000] 的整数. 示例: root = [10,5,-3,3,2,null,11,3,-2,null,1], sum ...

  5. 采坑笔记——mysql的order by和limit排序问题

    背景说明 今天写出一个十分弱智的bug,记录一下,提醒自己以后别这种犯错,不怕丢人哈~ 在写一个分页查询记录的sql时,要根据添加的时间逆序分页输出,之前的写法是酱紫 select record.a, ...

  6. Linux常见文件管理命令

    1.Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示.(1)目录管理命令——ls:列出指定目录下的内容格式:ls [OPTION]... [FILE]... -a:显示所有文件包 ...

  7. Python学习笔记：PEP8常用编程规范

    PEP8编码规范是一种非常优秀的编码规范,也得到了Python程序员的普遍认可,如果实践中或者项目中没有统一的编码规范,建议尽量遵循PEP8编码规范,当然如果项目中已经有了自身的编码规范,应当优先遵循 ...

  8. Python学习之高级特性

    切片 在Python基础篇里,我们知道Python的可序列对象可以通过索引号(下标)来引用对象元素,索引号可以由0开始从左向右依次获取,可以从-1开始由右向左获取.这种方法可以帮助我们依次获取我们想要 ...

  9. 为 vsftpd 启动 vsftpd：500 OOPS: SSL: cannot load RSA&nb

    博主在配置ftp服务器的时候 自己生成的CA,然后认证自己的私钥文件 一切配置都是没有问题的,然后重新启动服务器 service vsftpd restart    出现以下错误 为 vsftpd 启 ...

  10. C语言进阶——goto 和 void 的分析08

    遭人遗弃的goto: 高手潜规则:禁止使用goto 项目经验:程序质量与goto的出现次数成反比 最后的判决:将goto打入冷宫 程序示例1:(goto副作用分析) #include <stdi ...