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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
浅析JavaScript动画
Jun 10 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
js闭包学习心得总结
Apr 17 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
学前端,css与javascript重难点浅析
Jun 11 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 上传文件的方法(类)
2009/07/30 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
js代码实现微博导航栏
2015/07/30 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
小学校园活动策划
2014/01/30 职场文书
会议主持词
2014/03/17 职场文书
市场营销调查计划书
2014/05/02 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
个人收入证明格式
2015/06/24 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书