基于jQuery实现文字打印动态效果


Posted in jQuery onApril 21, 2017

本文实例为大家分享了jQuery实现文字打印动态效果的具体代码,供大家参考,具体内容如下

主体html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>打印文字效果</title>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">

  <script/>
<head>
<body>
  <p id="typing">The furthest distance in the world.Is not between life and death.But when I stand in front of you.Yet you don't know that I love you</p>
</body>

对于JQuery的引用,可以先到JQuery官网下载相应的版本,引用的时候加入相应的目录就可以了

接下来就是在script标签中添加代码实现文字的动态效果了,先上代码

<script>
  $(dcument).ready(function(){
    typing();
  })
  var text;//p标签里对应的字符串
  var index = 0;//text字符串的下标
  var id;//setTimeout()的返回值,用于关闭clearTimeout(id)
  function typing()
  {
    text = $("#typing").text();
    $("#typing").text("");
    $("#typing").show();
    typed();
  }
  result = "";
  function typed(){
    result += text.charAt(index);
    $("#typing").text(result + (index & 1 ? "_" : " "));
    if(index < text.length - 1)
    {
      index++;
      id = setTimeout("typed()", 100);
    }
    else
      clearTimeout(id);
  }
</script>

为什么显示文字的时候是result+ (index & 1 ? "_" : " ")呢,当然是为了打印的动态效果了,当下标index为奇数的时候最后一个字符显示为"_",当为偶数的时候显示" ",这样就能形成打印文字的那种动态效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
jQuery Plupload上传插件的使用
Apr 19 #jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
Jquery-data的三种用法
Apr 18 #jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
You might like
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php分页示例分享
2014/04/30 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
载入进度条 效果
2006/07/08 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
javascript 闭包详解
2015/07/02 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
github配置使用指南
2014/11/18 Python
Python科学计算之Pandas详解
2017/01/15 Python
python正则表达式re之compile函数解析
2017/10/25 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
保护环境的标语
2014/06/09 职场文书
撤诉书怎么写
2015/05/19 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
小英雄雨来观后感
2015/06/09 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书