jQuery实现文字打印动态效果实例分享

本文主要介绍了基于jquery实现文字打印动态效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

主体html

nbsp;html>    打印文字效果        

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

登录后复制

对于JQuery的引用,可以先到JQuery官网下载相应的版本,引用的时候加入相应的目录就可以了

接下来就是在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);  }

登录后复制

为什么显示文字的时候是result+ (index & 1 ? “_” : ” “)呢,当然是为了打印的动态效果了,当下标index为奇数的时候最后一个字符显示为”_”,当为偶数的时候显示” “,这样就能形成打印文字的那种动态效果。

相关推荐:

介绍一个javascript 实现文字打字效果的特效实例

js实现打印超市小票功能代码详解

js 客户端打印html 如何去掉页眉、页脚

以上就是jQuery实现文字打印动态效果实例分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2791088.html

(0)
上一篇 2025年3月8日 19:05:40
下一篇 2025年3月8日 19:05:56

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jquery中$.fn和图片滚动效果实现方法

    图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery、iife、setinterval等基础以及$.fn用法:图片滚动效果相信大家都使用过,看上去很简单的一个效果,如果想熟练的…

    2025年3月8日
    000
  • jQuery插件FusionCharts绘制的3D双柱状图

    本文主要介绍了jquery插件fusioncharts绘制的3d双柱状图效果,涉及jquery使用插件fusioncharts结合xml数据绘制的3d双柱状图的相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 1、3D双柱状图页面源码…

    2025年3月8日
    200
  • jQuery Plupload上传插件的使用方法详解

    本文主要介绍了 jquery plupload上传插件的使用详解,需要的朋友可以参考下,希望能帮助到大家。  首先下载plupload->http://www.plupload.com 因为Plupload可配置参数比较多,所以这里讲…

    2025年3月8日 编程技术
    200
  • jQuery加密cookie的实现方法

    本文主要和大家分享了jquery 加密密码到cookie的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助大家更好的掌握cookie。 废话不多说了,直接给大家贴代码了,具体代码如下所示:  nbsp;html>I…

    编程技术 2025年3月8日
    200
  • 为Jquery EasyUI 组件加上清除功能实例分享

    本文主要为大家带来一篇为jquery easyui 组件加上清除功能的方法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 1、背景 在使用 EasyUI 各表单组件时,尤其是使用 …

    2025年3月8日
    200
  • 为JQuery EasyUI 表单组件增加焦点切换功能实例分享

    本文主要为大家带来一篇为jquery easyui 表单组件增加焦点切换功能的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 1、背景说明     在使用 JQuery  EasyUI…

    2025年3月8日
    200
  • jQuery实现checkbox方法

    本文主要介绍了jquery实现checkbox的简单操作,对复选框组的全选、全不选、不全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 对复选框组的全选、全不选、不全选,获取选中的复选框的值的操作 1.点击全选按钮…

    编程技术 2025年3月8日
    200
  • jQuery滚动效果的实现方法

    本文主要为大家详细介绍了jquery实现滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 1. 图片轮播: 原理如下: 假设有三张图片,三张图片实际上都是存在于页面上的,但是由于设置的可视部分的大小(这里主要考…

    2025年3月8日
    200
  • jQuery实现定位导航位置详解

    本文主要为大家详细介绍了基于jquery实现定位导航位置效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动,并且点击导航条跳转到内容所在的位置; nbsp;…

    编程技术 2025年3月8日
    200
  • html中jQuery实现对文本的搜索功能

    本文主要介绍了前端html中jquery实现对文本的搜索功能并把搜索相关内容显示出来,在项目中经常会遇到,今天小编把实例代码分享给大家,需要的朋友可以参考下,希望能帮助到大家。 做项目的时候有这么一个需求,客户信息显示出来后我要搜索查找相关…

    2025年3月8日
    200

发表回复

登录后才能评论