用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;
		}
	</style>
	<script src="D:\jobn\前端笔记\jquery笔记\jquery-1.11.2.js"></script>
</head>
<body>
	<div id="container">

	</div>

	<script type="text/javascript">
		var con  = $("#container");
		var s = "这是一个用jquery实现的打字效果";
		var len = s.length;
		var index = 0;
		var tid = null;

		function start(){
			con.text('');
			tid = setInterval(function(){
				con.append(s.charAt(index));
				if(index ++ === len){
					clearInterval(tid);
					index = 0;
					start();
				}
			},100);
		}

		start();
	</script>

</body>
</html>
时间: 2024-10-09 07:13:41

用Jquery实现打字效果的相关文章

基于jQuery标题有打字效果的焦点图

给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <!-- 代码 开始 --> <div id="header"> <div class="wrap"> <div id="slide-holder&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

CSS 实现打字效果

原文:CSS 实现打字效果 JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"></div> <script src="typed.js"></script> <script> $(function(){ $(".element").typed({ strings: [&q

仿jQuery的siblings效果的js原生代码

仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling> 属性返回被选节点的下一个同级节点(在相同树层级中的下一个节点). 如果不存在这样的节点,则该属性返回 null.//元素节点的节点类型是 1  obj.previousSibling.nodeType ==1; reverse() 方法用于颠倒数组中元素的顺序. push() 方法可向数组的末尾添加一个

基于jquery多种切换效果的焦点图(兼容ie6)

随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨.下面为大家介绍一款完全基于juery的焦点图,而且这款插件完美支持ie6,多种百叶窗切换,效果还是相当赏目的.无图无真相,还是先上图 点击这里在线预览 点击这里下载源码 使用教程 这款插件代码很简洁,使用也非常简单.看截图 ok.今天就和大家分享到这里.周末好快,作为一名码农真是苦逼,明天还要早起,

jQuery之动画效果show()......animate()

jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1&qu

Unity UGUI 使用 CCTween 实现 打字效果

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

jquery的动画效果

序言:昨天复习了jQuery的一些事件,今天我打算继续来复习jQuery的动画效果. 用于写一些网页特效:渐变菜单,渐变显示,图片轮播等. 首先当然得引入插件:<script src="jquery/jquery-1.11.1.js"></script> 1.简单的HTML代码 <input type="button" value="show" id="btn1"/><input ty

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

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-