mootools_MooTools打字机效果插件

mootools

Last week, I read an article in which the author created a typewriter effect using the jQuery JavaScript framework. I was impressed with the idea and execution of the code so I decided to port the effect to MooTools. After about an hour of coding, I had a smooth, customizable Mootools class that accomplished the same goal. Without further adieu, here's my MooTools 1.2 Typewriter plugin.

上周，我读了一篇文章，其中作者使用jQuery JavaScript框架创建了打字机效果。 我对代码的想法和执行印象深刻，因此决定将效果移植到MooTools。 经过大约一个小时的编码，我有了一个平滑的，可自定义的Mootools类，该类实现了相同的目标。 不用再提了，这是我的MooTools 1.2 Typewriter插件 。

View Demo 观看演示

MooTools JavaScript类 (The MooTools JavaScript Class)

//class is in
var Typewriter = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		container: $(document.body),
		message: '',
		delay: 150,
		cursor: 0
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
	},
	
	//start the typewriter
	start: function() {
		
		//for every letter
		for(x = 0; x < this.options.message.length; x++) {
			//spit out the letter
			var id = this.setLetter.delay(this.options.delay * x, this);
		}
	},
	
	//place the newest letter in the container
	setLetter: function() {
		
		this.options.container.set('html',this.options.container.get('html') + '' + this.options.message.charAt(this.options.cursor));
		
		//increment cursor
		this.options.cursor++;
	}
});

Once the class is initialized, options get set (also note the class defaults). Once the start method is called, we loop through every character and call setLetter() to place the next character into the container after the specified delay.

初始化类后，将设置选项(还要注意类的默认设置)。 调用start方法后，我们将遍历每个字符并调用setLetter()以在指定的延迟后将下一个字符放入容器中。

用法 (The Usage)

var t = new Typewriter({
	container: $('type-here'),
	message: 'This is output from the typewriter class. This class is small but packs a good punch. Isn\'t MooTools great?',
	delay:100
}).start();

When creating your typewriter, you can pass it the following parameters:

创建打字机时，可以向其传递以下参数：

• container:: What element would you like the typewriter to write to?

  container ：：您希望打字机写入哪个元素？

• message:: What do you want the message to be?

  消息：：您希望消息是什么？

• delay:: How much time would you like between letters?

  延迟：您希望在两次信件之间花费多少时间？

• cursor:: What position in the message (which character) do you want the Typewriter to start at?

  cursor ：：您希望打字机在消息中的哪个位置(哪个字符)开始？

Once you're ready for to start the typewriter, you'll call the start() method.

准备启动打字机后，将调用start()方法。

View Demo 观看演示

翻译自: https://davidwalsh.name/mootools-typewriter

mootools