jQuery动态打字效果

  1. 引入jquery(jquery-10.1.3.js)

  2. 自己写一个扩展方法

  (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);
                }
            }, 75);
        });
        return this;
    };
})(jQuery);

3.html代码

I want to say:
Baby, I love you forever;

4.加载完页面调用方法

<script type="text/javascript">
$(function(){
    $("#code").typewriter();
})
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 jQuery 的 `setInterval` 方法来实现动态打字效果。具体实现步骤如下: 1. 在 HTML 中创建一个包含文本内容的元素,例如一个 `div` 元素。 2. 在 JavaScript 中使用 jQuery 选择该元素,并将要显示的文本内容保存到一个变量中。 3. 使用 jQuery 的 `text` 方法将该元素的文本内容清空。 4. 定义一个 `index` 变量,表示当前要显示的字符在文本内容中的位置,初始值为 0。 5. 使用 `setInterval` 方法循环执行一个函数,该函数每次将文本内容中的下一个字符添加到元素中,并将 `index` 变量加 1,直到显示完全部文本内容为止。 以下是示例代码: HTML: ```html <div id="text"></div> ``` JavaScript: ```javascript $(document).ready(function() { var text = "这是要显示的文本内容。"; var index = 0; var intervalId = setInterval(function() { if (index < text.length) { $('#text').text($('#text').text() + text[index]); index++; } else { clearInterval(intervalId); } }, 100); // 每隔 100 毫秒执行一次函数 }); ``` 在上面的示例代码中,`text` 变量保存要显示的文本内容,`index` 变量表示当前要显示的字符在文本内容中的位置,`intervalId` 变量保存 `setInterval` 方法返回的 ID,用于在显示完全部文本内容后停止循环执行函数。`setInterval` 方法每隔 100 毫秒执行一次函数,该函数每次将文本内容中的下一个字符添加到 `div` 元素中,并将 `index` 变量加 1,直到显示完全部文本内容为止。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值