JQ实现打字机效果

最新推荐文章于 2024-05-23 15:25:16 发布

Wjhsmart

最新推荐文章于 2024-05-23 15:25:16 发布

阅读量759

点赞数

分类专栏： JavaScrip 文章标签： js jquery

本文为博主原创文章，欢迎大家转载，转载请注明出处：

本文链接：https://blog.csdn.net/Wjhsmart/article/details/107013806

版权

JavaScrip 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、前言

二、效果图

三、代码

一、前言

本篇博客记录一下基于JQuery实现的打字机效果代码，感兴趣的可以一起学习学习。将下面代码复制到html文件中即可预览效果。

二、效果图

三、代码

<!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>