mootools_MooTools文字翻转

mootools

There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them.

有很多无用但有趣JavaScript技术。 这是他们中的另一个。

One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul Irish that accomplished this task so I decided to provide it in a MooTools format.

我很快就厌倦的一个愚人节笑话是网站将其文字颠倒了。 我找到了Paul Irish的jQuery插件来完成此任务，因此我决定以MooTools格式提供它。

View Demo 观看演示

MooTools JavaScript (The MooTools JavaScript)

/* when the dom's ready */
window.addEvent('domready',function() {
	
	/* implement flipText for Strings */
	String.implement({
		flipText: function() {
			/* define the characters */
			var charset = {a:"\u0250",b:"q",c:"\u0254",d:"p",e:"\u01DD",f:"\u025F",g:"\u0183",h:"\u0265",i:"\u0131",j:"\u027E",k:"\u029E",l:"l",m:"\u026F",n:"u",o:"o",p:"d",q:"b",r:"\u0279",s:"s",t:"\u0287",u:"n",v:"\u028C",w:"\u028D",y:"\u028E",z:"z",1:"\u21C2",2:"\u1105",3:"\u1110",4:"\u3123",5:"\u078E"   /* or u03DB */ ,6:"9",7:"\u3125",8:"8",9:"6",0:"0",".":"\u02D9",",":"'","'":",",'"':",,","´":",","`":",",";":"\u061B","!":"\u00A1","\u00A1":"!","?":"\u00BF","\u00BF":"?","[":"]","]":"[","(":")",")":"(","{":"}","}":"{","<":">",">":"<",_:"\u203E","\r":"\n"},
				result = '', 
				text = this.toLowerCase(), 
				len = text.length - 1;

			for(var x = len; x >= 0; --x) {
				var r = charset[c];
				result += r != undefined ? r : text.charAt(x);
			}
			return result;
		}
	});
	
	/* implement flipText for Elements */
	Element.implement({
		flipText: function(recurse) {
			/* get all of the children for this */
			var elements = [this, this.getChildren()].flatten();
			/* make it happen! */
			elements.each(function(el) {
				var children = el.getChildren();
				if(!children.length) {
					/* set the text of the element to this */
					el.set('text',el.get('text').flipText());
				} else if(recurse) {
					children.flipText();
				}
			});
		}
	});
	
	/* usage */
	$('button').addEvent('click',function() {
		$('flip-me').flipText(true);
	});
});

I provided functionality to accomplish this goal for both Strings and Elements. You'll also notice a recurse parameter that allows you to set whether or not you'd like to get child elements recursively.

我为字符串和元素提供了实现此目标的功能。 您还会注意到recurse参数，该参数允许您设置是否要递归获取子元素。

View Demo 观看演示

Have fun...but not too much fun!

玩得开心...但是不要玩太多！

翻译自: https://davidwalsh.name/flip-text

mootools