javascript queue 打字效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery queue</title>
<script src="framework/jquery-1.10.2.min.js"></script>
<script>
var content = "javascript is a good language!!";
$(function(){
function callback(){
console.log(this);
} function notify(word){
console.log("notify:" + word);
$("#content").append(word);
} var arr = content.split(' '); $.each(arr,function(index,item){
for(var i=0; i<item.length; i++) {
// console.log(i + " !!i = " + (!!i) + (!i));
(function(word){
$("#content").queue("dynamicStyle", function(next){
callback.call($(this));
notify(word);
next();
}).delay(200,"dynamicStyle");
})(item[i]);
}
$("#content").queue("dynamicStyle", function(next){
callback.call($(this));
notify(" ");
next();
}).delay(200,"dynamicStyle"); }); $("#content").dequeue("dynamicStyle");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
javascript queue 打字效果的更多相关文章
- Javascript实现打字效果
伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...
- javascript实现键盘自动打字效果
最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...
- JavaScript实现动态打字效果
废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- canvas打字效果
运用fillText,写的打字效果. 唯一麻烦的地方是,换行问题, 我是把字符串转化为数组,数组一个单位完成,就换行,继续下一个单位. <!doctype html> <html&g ...
- JS让网页上文字出现键盘打字的打字效果
一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...
- CSS 实现打字效果
JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...
- JavaScript 省市级联效果
JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
随机推荐
- mui 视频播放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- WebService中WSDL和WADL（转）
转自https://blog.csdn.net/liuxiao723846/article/details/51611183#commentBox 自己加了修改批注方便自己理解. 1.Java开发We ...
- [转载]威力导演14旗舰破解版(中文简体)｜取消30天限制CyberLink&nb
2015月9月15日(当地时间),CyberLink讯连科技发布新一代视频编辑软件 — PowerDirector威力导演14,融合了上个版本发布以来的多次更新升级,威力导演依旧 ...
- 【转】python面向对象中的元类
type() 动态语言和静态语言最大的不同,就是函数和类的定义,不是编译时定义的,而是运行时动态创建的. 比方说我们要定义一个Hello的class,就写一个hello.py模块: class Hel ...
- Web Deploy 安装及问题解决
注意: 站点名称: 服务器上IIS的站点名称. . 我之前这里随便写一直不成功. 返回500..... 用户名, 密码: 这里最好用windows帐号. 问题比较少. 目标URL: 可不写. 可 ...
- 通过ip得到所在城市,以及城市所在经纬度坐标（监控系统中用的该代码，小航哥）
监控系统中就是利用的该段代码,实现通过ip得到所在城市,以及城市所在经纬度坐标,最后得以利用echarts实现模拟迁移的效果 api官方介绍: http://lbsyun.baidu.com/inde ...
- c# 泛型（Generic）
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 泛型 { ...
- Spring 全局异常捕捉
Spring全局异常捕捉类 注解@ControllerAdvice package com.sicdt.sicsign.web.bill.controller; import org.springfr ...
- Linux环境下的图形系统和AMD R600显卡编程(1)——Linux环境下的图形系统简介
转:https://www.cnblogs.com/shoemaker/p/linux_graphics01.html Linux/Unix环境下最早的图形系统是Xorg图形系统,Xorg图形系统通过 ...
- nodejs安装，配置环境，使用express建立一个新项目
1.下载nodejs安装包 去nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包, 下载下来安装包 ...