`

文字的打字效果

阅读更多
var pos = 0;
var timeid;
function bridge_f(_dom,text){
	clearTimeout(timeid);
	var d = $(_dom).find("p");
	var max = text.length;
	d.html(text.substring(1, pos));
	pos++;
	if(pos<=max){
	   timeid = setTimeout(function(){bridge_f(_dom,text);}, 100);
	}
}
function show_fun(_dom){
	pos=0;
	$(_dom).parent().parent().hide();	
	var d =$(_dom).parent().parent().next();
	d.show();
	bridge_f($(d),$(d).find("p").html());	
}



终于把它弄好了,在点击事件触发的时候先是执行show_fun函数,传进去一个dom,是点击节点本身,然后是把本层节点隐藏,把下层节点显示(这个动作是别人原先需要的),然后是执行显示文字的效果,把要显示的节点和要显示的文字都传到方法里面去(原来我只传了以个节点参数,然后用节点参数读取里面的文字,失误啊),然后用setTimeout方法把文字显示出来。注意在setTimeout方法传参的办法要用上。还有要注意的是要把pos参数在show_fun里面置0,否则的话连续执行show_fun函数的话pos永远都是上一个文字的长度。
分享到:
评论

相关推荐

    易语言实现打字效果源码.rar

    在易语言中实现打字效果源码,主要是通过控制字符的输出速度和顺序来模拟人类打字的过程,这种效果常见于游戏中的文字滚动、软件提示信息等场景。 首先,我们需要了解易语言的基本结构。易语言程序由模块、窗口、...

    Flash as3 打字效果

    在Flash AS3中实现打字效果是动画制作中常见的技巧,它可以模拟文本逐字出现的动态过程,增强视觉吸引力和互动性。以下是对这个主题的详细讲解: 首先,`Flash AS3`是Adobe Flash Professional软件中的编程语言层,...

    iOS打字机效果Demo

    总之,"iOS打字机效果Demo"是一个实用的示例,它展示了如何在iOS应用中通过Objective-C实现打字机效果,包括文字切分、动画展示、自动居中和自动换行等功能。对于想要提升自己iOS应用交互性的开发者来说,这是一个...

    html5实现酷炫的文字打字动画特效源码.zip

    在这个"html5实现酷炫的文字打字动画特效源码.zip"压缩包中,我们可以期待找到一个利用HTML5技术来创建文字打字效果的示例代码。 打字机效果是一种流行且引人入胜的视觉元素,通常用于吸引用户的注意力或者在网页...

    c#文字逐个显示 实现打字机效果

    在C#编程中,"文字逐个显示"的实现通常涉及到控制台输出或者GUI界面的动态更新,模拟出打字机或卡拉OK歌词滚动的效果。这个功能在游戏、娱乐应用或者教学软件中很常见,可以增加用户体验的趣味性。下面我们将深入...

    vue3 实现 chatgpt 的打字机效果

    5. **模板渲染**:在Vue3的模板中,我们可以使用`v-if`和`v-for`指令来根据`typingText`和`isTyping`的状态展示打字效果: ```html {{ typingText }} ('\n')"&gt;↵ ``` 以上就是Vue3实现ChatGPT打字机效果的...

    UGUI打字效果_打字效果_Ugui_tunebi2_

    在UGUI中,我们经常需要实现各种交互效果,其中之一就是“打字效果”,也就是文字逐渐显示的效果,这在游戏加载提示、剧情对话或者用户输入验证等场景中非常常见。"UGUI打字效果_打型效果_Ugui_tunebi2_"这个项目或...

    易语言模仿打字效果(文字一个一个输入到编辑框)

    通过以上步骤,我们可以成功地在易语言中实现文字一个一个输入到编辑框的打字效果。这种效果不仅适用于简单的文本显示,还可以结合其他功能,如进度条、声音效果等,打造出更加丰富的用户交互体验。

    文字打字机效果(带颜色).txt

    文字打字机效果(带颜色)

    甲壳虫专用 可以自动播放(逐个打字效果显示)文字的记事本

    甲壳虫专用 可以自动播放(逐个打字效果显示)文字的记事本 甲壳虫专用 可以自动播放(逐个打字效果显示)文字的记事本 甲壳虫专用 可以自动播放(逐个打字效果显示)文字的记事本 甲壳虫专用 可以自动播放(逐个...

    VB6编写的自动打字文字特效.7z

    4. **用户交互**:还可以添加按钮控件,用户点击后开始或停止文字打字效果,增加用户体验。 5. **多线程处理**:如果需要在文字特效过程中执行其他任务,可以考虑使用多线程技术,让文字打字不影响主线程的运行。 ...

    vue3让ChatGPT实现打字机效果

    vue3让ChatGPT实现打字机效果

    Android仿打字机打字效果源码

    【Android仿打字机打字效果源码】是一种在Android应用开发中实现的动画效果,它模拟了老式打字机的文字输入过程,为用户带来一种独特的交互体验。这种效果通常用于文本显示、消息加载或者文章展示等场景,能够增加...

    打字机文字输出效果

    简单js实现打字机文字输出效果

    vue3 实现 chatgpt 的打字机效果.zip

    在本文中,我们将深入探讨如何使用 Vue3 来实现 ChatGPT 类似的打字机效果。Vue3 是一个流行的前端框架,它提供了响应式、组件化以及高效的开发体验。ChatGPT,则是人工智能领域的热门应用,它展示了自然语言处理的...

    一个有趣的屏幕打字效果

    有趣的屏幕打字效果,评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊评论啊

    react-reacttypewriterhook用reacthooks来实现打字机的效果

    `react-typewriter-hook`提供了许多可配置的选项,比如速度(speed)、暂停(pause)、回车(enter)和删除(delete)等,你可以根据需求自由定制打字效果。此外,如果你想要在多个地方使用打字机效果,可以通过传入...

    会写诗的VB文字特效,打字效果

    在VB(Visual Basic)编程环境中,我们可以创建各种各样的用户界面和动态效果,其中包括“会写诗的VB文字特效,打字效果”。这种效果通常通过模拟人类打字的速度和过程来展示文本,使得程序的交互更加生动有趣。下面...

    swift-Swift实现的打字机效果UILabel子类

    在这个类中,可以添加一些自定义属性,比如打字速度、延迟时间、是否自动删除等,以控制打字效果的行为。 2. **绘制文本**:重写`drawText(in:)`方法,以控制文本的绘制过程。在这里,我们将利用`CoreText`框架来逐...

    键盘的打字效果

    在IT领域,键盘是人与计算机交互的基本工具之一,尤其对于文字输入、编程以及各种办公应用,键盘的打字效果显得尤为重要。打字效果通常包括敲击反馈、按键声音、按键行程、触感以及响应速度等多个方面,这些因素都会...

Global site tag (gtag.js) - Google Analytics