<!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. 前端css样式及选择器

    标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式)    推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...

  2. mysql 数据库设计规范

    MySQL数据库设计规范 目录 1. 规范背景与目的 2. 设计规范 2.1 数据库设计 2.1.1 库名 2.1.2 表结构 2.1.3 列数据类型优化 2.1.4 索引设计 2.1.5 分库分表. ...

  3. 路由器基础配置之单臂路由实现vlan间通信

    我们将以上面的拓扑图开始进行配置,目的为设置单臂路由实现vlan间通信,设置4个vlan,pc0,1,2为vlan10 pc3,4,5为vlan20:pc6,7,8为vlan30:server0,1为 ...

  4. Java数据处理

    对于形如“(TYPE=SITA##)&&(((CTYP=FPL##)||(CTYP=CHG##)||(CTYP=CNL##)||(CTYP=DLA##)||(CTYP=DL##)||( ...

  5. Git的基本命令介绍

    Git的安装 进入官网下载系统所需要的版本  官网地址:https://git-scm.com/downloads 点击下载按钮官方网站一般会根据操作系统的自动下载所需要的Git版本. 下载完成后,点 ...

  6. Java8 新API读取文件内容

    import java.io.IOException;import java.nio.charset.Charset;import java.nio.file.Files;import java.ni ...

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

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

  8. 裸机——210SD卡启动

    1.通过阅读iROM_Application_note可以获取关于启动的全部信息 2.记录下代码 制作SD卡启动的代码,即添加校验和的 #include <strings.h> #incl ...

  9. [WorldFinal 2012E]Infiltration（dfs+图论）

    Description 题意:给定一个点数为n的竞赛图,求图的最小支配集 n<=75 Solution 如果将竞赛图的一个点删去,这个图还是竞赛图 而竞赛图每个点相连的边数为(n-1),那么删去 ...

  10. 笔记-scrapy-signal

    笔记-scrapy-signal 1.      scrapy singal 1.1.    信号机制 scrapy的信号机制主要由三个模块完成 signals.py 定义信号量 signalmana ...