基于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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery检测上传文件大小示例
Apr 26 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批量生成随机用户名
2008/07/10 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
google地图的路线实现代码
2009/08/20 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
angular分页指令操作
2017/01/09 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
Python实现二分法算法实例
2015/02/02 Python
安装Python的教程-Windows
2017/07/22 Python
python定时关机小脚本
2018/06/20 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python如何根据时间序列数据作图
2020/05/12 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
记者岗位职责
2014/01/06 职场文书
开业庆典答谢词
2014/01/18 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
安全例会汇报材料
2014/08/23 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python