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("&nbsp;");
                            next();
                }).delay(200,"dynamicStyle");

            });

            $("#content").dequeue("dynamicStyle");
        });
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>
时间: 2024-08-19 10:51:14

javascript queue 打字效果的相关文章

js实现打字效果

<!DOCTYPE html>      <html>       <head>           <meta charset='utf-8'>           <title>js typing</title>       </head>          <body>           <div id='text'></div>              <script&

用Jquery实现打字效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #container{ height: 200px; width: 200px; border: 1px solid #ccc; } </

JS打字效果的动态菜单代码分享

这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.为大家分享的JS打字效果的动态菜单代码如下 <html> <head> <title>JS打字效果的动态菜单</title> <meta http-equiv="imagetoolbar" content=&q

jQuery模仿人类打字效果插件typetype

typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢的朋友研究下吧,下面来看下它的使用方法: 引入核心文件 1 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 2 <script type="text/j

JS让网页上文字出现键盘打字的打字效果

一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html> <head> <title>打字效果</title> <meta http-equiv="Content-Type" Content="text/html;charset=gb2312" /> <style

Unity UGUI 使用 CCTween 实现 打字效果

最近闲来无事 就研究了下 打字效果的实现 结果发现很简单 直白了说是太简单了  下边效果图加代码 走着 SVN 下载地址 http://code.taobao.org/svn/CCAnim 欢迎大家进行补充 点击下载

基于定时器延时器的简单打字效果——拿去表白吧

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 #div1{ 9 width: 300px; height: 500px; margin: 0 auto;border: 10px solid skyblue; border-radius: 10px; 10 line-

JavaScript之放大镜效果2

在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" con

javascript实现五角星效果

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JQuery Adventures</title> <style> *{ padding:0; margin:0;} li { list-style:none;} #ul1 {