<!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. ipython notebook的使用

    刚开始使用python,用的是ipython notebook,感觉很好用. 写的程序主要是处理文件的,读写txt文件,生成xml文件,其中参考http://www.cnblogs.com/wangs ...

  2. scp 远程拷贝

    scp拷贝时,可以从本地拷贝到远程,也可以远程拷贝到本地.唉,我记得之前是都用过的,但是现在完全忘了,今天同事写出来我才意识到自己之前用过的. 唉,这几年在新单位如果不好好积累一下理论上的东西,真的是 ...

  3. 【杂题总汇】UVa-1627 Team them up!

    [UVa-1627] Team them up! 借鉴了一下hahalidaxin的博客……了解了思路,但是莫名Wa了:最后再找了一篇dwtfukgv的博客才做出来

  4. MySQL主从复制读写分离如何提高从库性能-实战

    在做主从读写分离时候,需要注意主从的一些不同参数设置,来提高从库的性能,提高应用读取数据的速度,这样做很有必要的. 做读写分离复制主从参数不同设置如下(需要根据自己应用实际情况来设置): parmet ...

  5. 手机丢了怎么办？MZ给你来支招

    1致电运营商挂失手机 2致电银行冻结手机网银 3手机绑定支付宝的拨95188挂失 4微信用户登录110.qq.com冻结账号 5修改微博.微信.QQ等密码 6到手机运营商处补手机卡. 一定要记住啊!手 ...

  6. while循环,格式化输出,运算符

      1.while循环 1.while 基本机构: while 条件: 循环体 执行流程: 当条件成立时为真,执行循环体. 再次判断条件是否成立,如果成立再次执行. 当判断条件结果为假时,跳出循环,本 ...

  7. Hive的数据库和表

    本文介绍一下Hive中的数据库(Database/Schema)和表(Table)的基础知识,由于篇幅原因,这里只是一些常用的.基础的. Hive的数据库和表 先看一张草图: Hive结构 从图上可以 ...

  8. 海康威视面试python后端题

    1. 请简述三次握手和四次挥手: 答:首先TCP是传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接,在建立TCP连接时,需要客户端和服务器总共发送3个包. 三次握手的目的是连接服务器的指 ...

  9. 分离链接法(Separate Chaining)

    之前我们说过,对于需要动态维护的散列表 冲突是不可避免的,无论你的散列函数设计的有多么精妙.因此我们解决的重要问题就是:一旦发生冲突,我们该如何加以排解? 我们在这里讨论最常见的两种方法:分离链接法和 ...

  10. spark基于win上面的操作

    自己前面的小练习一直都是在linux上面写的,可是最近由于要把他迁移到win上面,我在自己的csdn博客有对如何在win上面搭建spark环境做出说明,好了,我们还是先看看 今天的内容吧 1.假如你有 ...