<!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. Python实现批量MD5加密

    #!/usr/bin/python # -*- coding: utf-8 -*- import hashlib def md5(str): hl = hashlib.md5() hl.update( ...

  2. C#/WPF/WinForm/.NET程序代码实现软件程序开机自动启动的两种常用方法的示例与源码下载带详细注释-源码代码-注册表方式-启动目录快捷方式

    C#/WPF/WinForm/.NET程序代码实现软件程序开机自动启动的两种常用方法的示例与源码下载带详细注释-源码代码-注册表方式-启动目录快捷方式 C#实现自动启动的方法-两种方法 源码下载地址: ...

  3. EntityFramework数据持久化 Linq语法应用

    Linq基础语法 LINQ概述 LINQ(Language Integrated Query,语言集成查询)提供了一种跨数据源和数据格式查询的统一模型. LINQ的组成: LINQ To Object ...

  4. Java实现 LeetCode 695 岛屿的最大面积（DFS）

    695. 岛屿的最大面积 给定一个包含了一些 0 和 1 的非空二维数组 grid . 一个 岛屿 是由一些相邻的 1 (代表土地) 构成的组合,这里的「相邻」要求两个 1 必须在水平或者竖直方向上相 ...

  5. Java实现 LeetCode 482 密钥格式化

    482. 密钥格式化 给定一个密钥字符串S,只包含字母,数字以及 '-'(破折号).N 个 '-' 将字符串分成了 N+1 组.给定一个数字 K,重新格式化字符串,除了第一个分组以外,每个分组要包含 ...

  6. Java实现 LeetCode 449 序列化和反序列化二叉搜索树

    449. 序列化和反序列化二叉搜索树 序列化是将数据结构或对象转换为一系列位的过程,以便它可以存储在文件或内存缓冲区中,或通过网络连接链路传输,以便稍后在同一个或另一个计算机环境中重建. 设计一个算法 ...

  7. ubuntu下Vivado launch SDK后，SDK无菜单栏解决办法

    最近在调Xilinx的ZYNQ 7015,按照教程从Vivado中Launch SDK后遇到了个问题,SDK的菜单栏消失了,真的没了,我的环境是ubuntu 16.4.百度好久都没有人遇到该问题,经过 ...

  8. OV2640读ID全是FF问题

    最近刚好在Cyclone IV上通过LVDS把一个7寸的屏点亮,赶着热度,淘宝买了OV2640这个摄像头模块,初始化因为用Vrilog比C复杂得多,易调试性不如C,所以使用STM32初始化,模块有F3 ...

  9. 移动UI系列 - 简单地使用半衰期算法来预测手势的滑动方向与速度

    前言 有一个问题, 给定一个物体的运动轨迹, 包含时间和坐标的数组, 如何使用这个数据来预测物体未来的运动走势?? 本文提供了一个很简单的方式去实现这个算法. 效果够用, 又简单, 有一定的准确程度. ...

  10. Flask 的配置文件

    Flask 的配置文件 四种方法给 Flask 做配置 1直接给 app 对象赋值属性 以字典的形式,给flask做配置 以文件的形式,给flask做配置(django 就是用这种) 以类的形式,给f ...