<!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. 【积累】如何优雅关闭SpringBoot Web服务进程

    1.使用ps ef查出进程对应的pid. 2.使用kill -15 pid结束进程. 为什么不使用kill -9 pid,个人理解kill -15 pid更优雅,能在结束进程前执行spring容器清理 ...

  2. git可视化打包更新文件

    每次当我们修改了项目代码的时候,总需要理出来一个更新包发给测试部门或者给客户更新.当我们一次的修改的代码多了之后,我们就很难按照文件夹一个一个的去提交出来哪些的更新的,哪些是未修改的.于是乎就在度娘能 ...

  3. Java实现 LeetCode 466 统计重复个数

    466. 统计重复个数 定义由 n 个连接的字符串 s 组成字符串 S,即 S = [s,n].例如,["abc", 3]="abcabcabc". 另一方面, ...

  4. Java实现 蓝桥杯VIP 算法提高 5-3日历

    算法提高 5-3日历 时间限制:1.0s 内存限制:256.0MB 问题描述 已知2007年1月1日为星期一.设计一函数按照下述格式打印2007年以后(含)某年某月的日历,2007年以前的拒绝打印.为 ...

  5. java实现Kruskal算法

    1 问题描述 何为Kruskal算法? 该算法功能:求取加权连通图的最小生成树.假设加权连通图有n个顶点,那么其最小生成树有且仅有n - 1条边. 该算法核心思想:从给定加权连通图中,选择当前未被选择 ...

  6. 基于华为云IOT及无线RFID技术的智慧仓储解决方案最佳实践系列一

    [摘要]仓储管理存在四大细分场景:出入库管理.盘点.分拣和货物跟踪.本系列将介绍利用华为云IOT全栈云服务,端侧采用华为收发分离式RFID解决方案,打造端到端到IOT智慧仓储解决方案的最佳实践. 仓储 ...

  7. 拉勾网 + selenium

    目录 方式一 selenium 方式二普通方法 方式一 selenium from selenium import webdriver import time from selenium.webdri ...

  8. UDF_表值函数与标量函数的区别_分割字符串成单个的字符并返回表(插入到表中)

    UDF_区别_分割字符串成单个的字符并返回表(插入到表中) /* SQL表值函数和标量值函数的区别 实验环境:SQL Server 2014,参考maomao365有改编 在sqlserver中存储过 ...

  9. Dubbo笔记（一）

    一．简介 在编写分布式场景下高并发.高扩展的系统对技能的要求很高,因为这个过程会涉及到序列化/反序列化.多线程.网络编程.设计模式.性能优化等众多专业知识.而Dubbo框架对这些专业知识做了更高层的抽 ...

  10. Java对象转换Json的细节处理

    一.fastJson 1.fastJson在转换java对象为json的时候,默认是不序列化null值对应的key的 也就是说当对象里面的属性为空的时候,在转换成json时,不序列化那些为null值的 ...