基于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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
如何基于jQuery实现五角星评分
Sep 02 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 header函数的常用http头设置
2015/06/25 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
在django模板中实现超链接配置
2019/08/21 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
中专生自荐信
2013/10/12 职场文书
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
母亲节感恩寄语
2014/02/21 职场文书
公司年会主持词
2014/03/22 职场文书
小学生暑假家长评语
2014/04/17 职场文书
五一口号
2014/06/19 职场文书
捐助倡议书
2015/01/19 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2015年征兵工作总结
2015/07/23 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
简单介绍Python的第三方库yaml
2021/06/18 Python