<!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. 【HIVE高级笔试必备题型】（组内topN、相邻行的值比较问题）求语文大于数学_/_求文科大于理科成绩的学生

    Hive SQL练习之成绩分析 数据:[id, 学号,班级,科目,成绩] 1,1,1,yuwen,80 2,1,1,shuxue,85 3,2,1,yuwen,75 4,2,1,shuxue,70 5 ...

  2. ecilpse 纠错插件

    在market里面搜索 Spot Bugs Unnecessary Code Detector

  3. 注解@NotNull/@NotEmpty/@NotBlank

    @NotNull:不能为null,但可以为empty @NotEmpty:不能为null,而且长度必须大于0 @NotBlank:只能作用在String上,不能为null,而且调用trim()后,长度 ...

  4. Java实现 LeetCode 331 验证二叉树的前序序列化

    331. 验证二叉树的前序序列化 序列化二叉树的一种方法是使用前序遍历.当我们遇到一个非空节点时,我们可以记录下这个节点的值.如果它是一个空节点,我们可以使用一个标记值记录,例如 #. _9_ / \ ...

  5. android日常开发总结的技术经验60条

    全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 数据库表段字段常量和SQL逻辑分离,更清晰,建议使用 ...

  6. javaCV开发详解之12：视频转apng动态图片实现，支持透明通道，也支持摄像机、桌面屏幕、流媒体等视频源转apng动态图

    wjavaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG. ...

  7. hadoop知识整理（2）之MapReduce

    之前写的关于MR的文章的前半部分已丢. 所以下面重点从3个部分来谈MR: 1)Job任务执行过程,以及主要进程-ResourceManager和NodeManager作用: 2)shuffle过程: ...

  8. Nice Jquery Validator 自定义规则

    规则定义方式 (1). 正则 适用于使用单个正则能搞定的验证. // 使用数组包裹正则和错误消息,规则不通过时提示该消息 mobile: [/^1[3458]\d{9}$/, '请检查手机号格式'] ...

  9. （八）利用 Profile 构建不同环境的部署包

    接上回继续,项目开发好以后,通常要在多个环境部署,象我们公司多达5种环境:本机环境(local).(开发小组内自测的)开发环境(dev).(提供给测试团队的)测试环境(test).预发布环境(pre) ...

  10. java中Proxy类初探

    在java中提供了一个动态代理类,这个类位于java.lang.reflect包中的Proxy类中.什么是动态代理类呢?就是可以在运行时创建一个实现了一组给定接口的新类.听上去有点高深的样子,其实是提 ...