今天给深山的鹿博客站点副标题增加了打字机效果，转载自蓝叶个人博客（http://lanyes.org/）下面我们看一下源码。

一、给当前模板增加一段JS ，比如说命名为“daziji.js” 

$.fn.typing = function(n){
	// 默认选项
	var options = {
		speed	: 150,		// 打字速度
		range	: 100,		// 打字速度波动的范围
		repeat	: true,		// 是否重复 
		flashback : false,	// 是否倒叙返回
		flicker	: true		// 是否闪烁
	}
	$.extend(options,n);
	
	var _this = $(this);
	var str = $(this).text().split(''); //分割字符串
	var index = 0; // 当前索引
	var direction = 1; // 1为正向，-1为反方向
	// 将分割后的字符串装入数组
	$(str).each(function(i,k){
		str[i] = (str[i-1] ? str[i-1] : '') + str[i];
	});
	// 设置边框模拟光标
	_this.css('border-right','0');
	
	// 启动定时器，开启打字效果
	setTimeout(init,options.speed);
	
	// 初始化函数
	function init(){
		_this.text(str[index]);
		
		// 如果运行到最后,且开启了重复
		if(index >= (str.length-1) && options.repeat){
			// 如果设置了倒叙则变换方向
			if(options.flashback){
				direction = -1; // 变换方向为负方向
			}else{
				index = 0;
			}
			// 如果设置了闪烁则启用闪烁效果
			if(options.flicker){
				_this.delay(200).fadeOut(1).delay(400).fadeIn(1).delay(200).fadeOut(1).delay(400).fadeIn(1);
			}
			setTimeout(init,2000);
		
		// 如果运行到最后但未开启重复
		}else if( index >= (str.length-1) && !options.repeat ){
			// 如果设置了闪烁则启用闪烁效果
			if(options.flicker){
				_this.delay(200).fadeOut(1).delay(400).fadeIn(1).delay(200).fadeOut(1).delay(400).fadeIn(1);
			}
			// 移除光标样式
			_this.css('border-right','');
		
		// 如果倒回到开始
		}else if(index < 0 ){
			index = 0;
			direction = 1; // 变换方向为正方向
			setTimeout(init,Math.random()*options.range + options.speed);
		
		}else{
			setTimeout(init,Math.random()*options.range + options.speed);
		}
		
		index += direction;
	}
};


二、调用该JS，举例： 

<script type="text/javascript" src="daziji.js"></script>
<script>
//speed:100,   repeat:true, // 是否重复不重复写false  flashback:true // 是否倒叙返回 flicker:true  // 是否闪烁
$(document).ready(function(){
 $('#text').typing({
  speed:100,// 打字速度
  repeat:true,// 是否重复不重复写false
  flashback:false,// 是否倒叙返回
  flicker:true// 是否闪烁不闪烁把true改成false
});})
</script>
</head>
<body>
<p id="text">调用JS测试......</p>
</body>
</html>


注：
深山的鹿博客中这段JS加在theme.js后面，并使用在网站首页的站点副标题显示打字机效果。
现代码为调用最新微语： 

$(document).ready(function(){
 $('#text').typing({
  speed:100,
  repeat:true,
  flashback:false,
  flicker:true
});})
</script>
<p id="text"><?php $newtws_cache = $CACHE->readCache('newtw');echo $newtws_cache[0]['t'];?></p>

代码为调用站点副标题摇晃效果： 
<p><div class="shake shake-slow"><?php echo $bloginfo; ?></div></p>
附：shake css代码：http://www.noteet.com/3308.html