Javascrip实现文字跳动特效


Posted in Javascript onNovember 27, 2016

一.如何让字符串变成 一个个的字体,让我们去控制

1获取字符串内容

2清空字符串内容

3遍历字符串, 然后一个个的切割出来。

4给切割出来的文字添加定位

5把添加好定位的文字,重新赋值到获取的 元素里面。

二.鼠标滑动上去之后, 该怎么去实现 文字的跳动

1 定义一个变量0

2 定义 定时器

3让变量不断的 减少

4改变元素的top == 变量

5当 变量 达到一定高度的时候,让变量不断的 增加

6 当变量 减少到0(本身位置) 的时候,

7清除动画 改变元素的top = 0(本身位置)

<!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>

以上所述是小编给大家介绍的Javascrip实现文字跳动特效,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
javascript中scrollTop详解
Apr 13 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 #Javascript
Angularjs之filter过滤器(推荐)
Nov 27 #Javascript
Web前端开发之水印、图片验证码
Nov 27 #Javascript
jQuery时间日期三级联动(推荐)
Nov 27 #Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 #Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 #Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 #Javascript
You might like
PHP反射机制用法实例
2014/08/28 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
使用pandas读取文件的实现
2019/07/31 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
交通安全教育心得体会
2016/01/15 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS