基于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 相关文章推荐
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
js类 from qq
2006/11/13 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
在类Unix系统上开始Python3编程入门
2015/08/20 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
wxpython实现图书管理系统
2018/03/12 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python创建数字列表的示例
2019/11/28 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
一些Solaris面试题
2013/03/22 面试题
《火烧云》教学反思
2014/04/12 职场文书
教学质量月活动总结
2015/05/11 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
2019销售早会主持词
2019/06/27 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python