基于jQuery的打字机函数
<!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的打字机函数的更多相关文章
- 基于jquery 的find()函数和children()函数的区别
element.find(selector) 返回匹配element集合中每个元素的后代,参数selector是必须的,可以通过选择器对元素进行过滤,筛选出符合条件的元素.如果想选中所有的后代元素, ...
- 基于JQuery的获取鼠标进入和离开容器方向的实现
做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数
这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...
- 详细解读Jquery各Ajax函数
$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...
随机推荐
- Linux（十） —— 使用 rz 和 sz 命令上传与下载
以CentOS 7 系统为例,一般上传下载都是使用的第三方工具,但是在操作上并不方便,每次都要找到对应的目录才可以执行上传.下载操作,比较麻烦. 而CentOS为例的 Linux 系统可以通过安装 插 ...
- 【JVM】垃圾回收器总结（2）——七种垃圾回收器类型
七种垃圾回收器类型 GC的约定参数 DefNew——Default New Generation Tenured——Serial Old ParNew——Parallel New Generation ...
- Java实现 LeetCode 561 数组拆分 I（通过排序算法改写PS：难搞）
561. 数组拆分 I 给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), -, (an, bn) ,使得从1 到 n 的 min(ai, bi ...
- java代码（7） ---guava之Bimap
guava之Bimap bimap的作用很清晰:它是一个——映射,可以通过key得到value,也可以通过value得到key 一.概述 1.bimap和普通HashMap区别 (1)在java集合类 ...
- Linux文件处理命令touch、cat、more、head详解
命令touch详解 命令touch,所在路径及执行权限为: 可以看到,命令的路径为:/usr/bin/touch ,所以它的执行权限为所有用户 命令基本功能是创建空文件 (可以同时创建多个空文件,文件 ...
- （前言一）HTTP报文
01 概述 客户端与服务器端之间的通信,通过HTTP协议,以HTTP报文的形式来实现数据的交互. HTTP报文是HTTP通信时发送的数据块,本文主要从以下几个方面介绍HTTP报文:HTTP报文结构.方 ...
- Android数据库框架-ORMLite
参考资料 Android ORMLite 框架的入门用法 Android 快速开发系列 ORMLite 框架最佳实践 添加依赖 compile 'com.j256.ormlite:ormlite-an ...
- RabbitMQ系列之【启动过程中遇到问题及解决方案】
1.如果显示找不到主机,请在hosts文件中添加: vi /etc/hosts 127.0.0.1 localhost 2.从3.3.1版本开始,RabbitMQ默认不允许远程ip登录,即只能使用lo ...
- Linux防火墙iptables详解
iptables详解(思维导图) 1. 概述 1.1 iptable简介 1.2 防火墙的种类 1.3 netfilter 2. iptables的工作流程 2.1 iptables工作图示 2.2 ...
- （八）MySQL事务、视图、变量、存储过程、函数、流程控制结构
补充:增删查改语句在数据库中基本通用,但这篇博客的内容基本是MySQL区别于其它数据库管理系统的知识,也要认真学习. 一.事务 1.含义:在MySQL中,可以通过创建事务来解决一些问题. 2.语法: ...