<!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. java实现黄金分割数

    黄金分割数 0.618 与美学有重要的关系.舞台上报幕员所站的位置大约就是舞台宽度的 0.618 处, 墙上的画像一般也挂在房间高度的 0.618 处,甚至股票的波动据说也能找到 0.618 的影子- ...

  2. Java实现第十届蓝桥杯外卖店优先级

    试题 G: 外卖店优先级 时间限制: 1.0s 内存限制: 512.0MB 本题总分:20 分 [问题描述] "饱了么"外卖系统中维护着 N 家外卖店,编号 1 ∼ N.每家外卖店 ...

  3. CSS3动画基础

    编写页面 记事本或SublimeText或vscode编写html: <html> <div id="box"></div> <style ...

  4. Windows学习Nodejs、Npm和VUE

    前言 本文主要以开发的角度讲解Node.js,Npm和Vue. Node.js学习 什么是Node.js Node.js简单来说就是一个IISExpress,提供一个前端Html的独立运行环境. 安装 ...

  5. local 对象补充

    昨日回顾 1 @app.before_first_request,再项目启动后接收到的第一个请求,会执行before_first_request,他再@app.before_request之前执行.他 ...

  6. Redis Desktop Manager无法连接虚拟机中启动的redis服务问题排查步骤

    Redis Desktop Manager下载地址 https://redisdesktop.com/download 安装好以后连接linux服务器上的Redis服务器错误: 问题排查: 1.检查R ...

  7. 【分区】使用 MBR 分区表分区并格式化

    注意: 本方法仅适用于容量小于 2TB 的硬盘进行分区及格式化.大于 2TB 的硬盘的分区及格式化请使用 GPT方式,可参阅 使用 GPT 分区表分区并格式化. 格式化后,数据盘中的数据将被全部清空. ...

  8. C++中类成员的访问控制

    结论 首先给出结论,请看下图,看图说话最容易理解了. 类眼中的自己 类中定义的所有成员,不论是以public, protected还是private修饰,对类自身而言,它们都是可见的. 对象眼中的类 ...

  9. （一）POI-新建excel文件

    原文:https://blog.csdn.net/class157/article/details/92799521 package com.java.poi; import org.apache.p ...

  10. docker 容器命令

    语法docker run [OPTIONS] IMAGE [COMMAND] [ARG...] OPTIONS说明: -a stdin: 指定标准输入输出内容类型,可选 STDIN/STDOUT/ST ...