<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="pic" style="display: none;">

        这是一段打字机效果的文字

    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>

        (function ($) {

            $.fn.typewriter = function () {

                this.each(function () {

                    var $ele = $(this),

                        str = $ele.html(),

                        progress = 0;

                    $ele.html('');

                    var timer = setInterval(function () {

                        var current = str.substr(progress, 1);

                        if (current == '<') {

                            progress = str.indexOf('>', progress) + 1;

                        } else {

                            progress++;

                        }

                        $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));

                        if (progress >= str.length) {

                            clearInterval(timer);

                        }

                    }, 150);

                });

                return this;

            };

        })(jQuery);

        $("#pic").show().typewriter(50);

    </script>

</body>

</html>

基于jQuery的打字机函数的更多相关文章

  1. 基于jquery 的find()函数和children()函数的区别

    element.find(selector)  返回匹配element集合中每个元素的后代,参数selector是必须的,可以通过选择器对元素进行过滤,筛选出符合条件的元素.如果想选中所有的后代元素, ...

  2. 基于JQuery的获取鼠标进入和离开容器方向的实现

    做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...

  3. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  4. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  5. 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  6. 基于JQuery.timer插件实现一个计时器

    基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下.   先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...

  7. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  8. jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数

    这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...

  9. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

随机推荐

  1. 金融SaaS平台之构思篇

    背景介绍 从事过金融服务行业的同学们都知道,业务系统是非常之多的,核心的就有估值.交易.TA.资讯系统,其他类似产品生命周期系统.投后分析系统等待,而且各个业务系统的逻辑非常之复杂,所以一般金融机构都 ...

  2. C#中的TemplateMethod模式

    一个真实的故事 大学的时候就开过一门课程,讲设计模式,可是大学生没什么编程实践经验,在大学里面听设计模式的感觉,就像听天书.听着都有道理,可是完全领会不到其中的奥妙,大抵原因就在于没有走过弯路,没有吃 ...

  3. windows FTP工具，Windows FTP工具下载！

    IIS7服务器管理工具能够作为FTP的客户端,进行FTP的命令操作,可在客户端,下载,安装FTP软件! 同时,它也可以作为VNC的客户端,进行VNC的命令操作!它能够批量连接Windows和Linux ...

  4. （Java实现） 光荣的梦想

    光荣的梦想 Time Limit:10000MS Memory Limit:65536K Total Submit:110 Accepted:45 Description Prince对他在这片大陆上 ...

  5. Java实现 LeetCode 91 解码方法

    91. 解码方法 一条包含字母 A-Z 的消息通过以下方式进行了编码: 'A' -> 1 'B' -> 2 - 'Z' -> 26 给定一个只包含数字的非空字符串,请计算解码方法的总 ...

  6. iOS－线程&&进程的深入理解

    进程基本概念 进程就是一个正在运行的一个应用程序; 每一个进度都是独立的,每一个进程均在专门且手保护的内存空间内; iOS是怎么管理自己的内存的,见博客:博客地址 在Linux系统中,想要新开启一个进 ...

  7. js排他性算法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 使用 UniApp 实现小程序的微信登录

    微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取 ...

  9. 使用FFT进行频谱分析

    import numpy as np import matplotlib.pyplot as plt from scipy.fftpack import fft fs=100 #采样频率 N=128 ...

  10. Base-64字符串无效，The input is not a valid Base-64 string as it contains a non-base 64 character

    base64规则: * 字符串只可能包含A-Z,a-z,0-9,+,/,=字符* 字符串长度是4的倍数* =只会出现在字符串最后,可能没有或者一个等号或者两个等号 首先,C# 做上传文件的时候,需要替 ...