基于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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jquery实现简易验证插件封装
Sep 13 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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
Three.js基础部分学习
2017/01/08 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
几种响应式文字详解
2017/05/19 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python help()函数用法详解
2014/03/11 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python实现定时发送qq消息
2019/01/18 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
为什么使用接口?
2014/08/13 面试题
幼儿园教学随笔感言
2014/02/23 职场文书
保证书范文大全
2014/04/28 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
解除租房协议书
2014/12/03 职场文书
创卫工作总结2015
2015/04/22 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书