基于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.form.js的使用详解
Jun 14 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP7 新增常量
2021/03/09 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
java直接调用python脚本的例子
2014/02/16 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python如何更新包
2020/06/11 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
医学生自我鉴定范文
2013/11/08 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
领导班子整改方案
2014/10/25 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
JavaScript文档对象模型DOM
2021/11/20 Javascript
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js