mootools_MooTools TextOverlap插件

mootools

Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element to a website.

各地的开发人员似乎都在寻找使用JavaScript库的不同方法。 有些创作非常实用，有些则不是。 这个可能更多，但没有正确使用，我的TextOverlap插件可以向网站添加另一个有趣的设计元素。

View Demo 观看演示

XHTML (The XHTML)

<h2 class="overlap">Look At My Header!  Isn't It Something?</h2>
<p class="overlap">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et nisl. Aliquam justo justo, 
	posuere vel, blandit non, vulputate at, nisl. Nunc scelerisque pulvinar lectus.
</p>

Nothing special here. Just a page's content given an overlap class.

这里没什么特别的。 给定重叠类的只是页面内容。

CSS (The CSS)

.overlapper	{ color:#999; font-style:italic; z-index:-1; position:absolute; border-bottom:0; }
.overlapperp{ color:#666; z-index:-2; position:absolute; }

The above CSS code will be applied to the respective Moo-generated overlap element. You'll assign classes to the overlap when you create an instance of TextOverlap.

上面CSS代码将应用于Moo生成的各个重叠元素。 创建TextOverlap实例时，将为重叠部分分配类。

MooTools JavaScript (The MooTools JavaScript)

var TextOverlap = new Class ({
	
	//implements
	Implements: [Options],
	
	//options
	options: {
		offsety: 1,
		offsetx: 1,
		elements: $$('h1'),
		container: $$('body')[0],
		overlapClass: ''
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//do the overlap
		this.overlap();
	},
	
	//overlap the previoius text
	overlap: function() {
		this.options.elements.each(function(el) { 
			
			//get original position
			var pos = el.getPosition();
			
			//create a new element
			var over = new Element(el.get('tag'),{ 
				'class': this.options.overlapClass, 
				'style':'left:' + (pos.x + this.options.offsetx) + 'px;top:' + (pos.y + this.options.offsety) + 'px;position:absolute;', 
				'text':el.get('html') 
			});
			over.inject($$('body')[0]);
		}, this);
	}
});

The class accepts the following options:

该类接受以下选项：

• offsety: y coordinate difference in the overlap

  offsety ：重叠中的y坐标差

• offsetx: x coordinate difference in the overlap

  offsetx ：重叠中的x坐标差

• elements: collection of elements to apply the overlap to

  elements ： 元素的集合，将重叠部分应用于

• container: container in which to inject the overlap. Usually the BODY element.

  container ：要在其中注入重叠的容器。 通常是BODY元素。

• overlapClass: class to apply to the overlap element

  overlayClass ：应用于重叠元素的类

 

Once the instance is created, the class creates a new element for each element in the collection, adds the respective class/style attributes, and positions the class at the specified offsets. Simple!

创建实例后，该类将为集合中的每个元素创建一个新元素，添加相应的类/样式属性，并将该类放置在指定的偏移量处。 简单！

Moo用法 (The Moo Usage)

window.addEvent('domready', function() {
	/* header */
	var myOverlap = new TextOverlap({
		offsety: 3,
		offsetx: 2,
		elements: $$('h2.overlap'),
		overlapClass: 'overlapper'
	});
	/* text */
	var myOverlap2 = new TextOverlap({
		elements: $$('p.overlap'),
		overlapClass: 'overlapperp',
		offsetx: 1,
		offsety: 0 
	});
});

Two separate instances are used for creating effects on the header and the paragraph. Different options are given to each effect.

使用两个单独的实例在标题和段落上创建效果。 每种效果都有不同的选择。

I would hate for someone to get too wild with this class. Use it sparingly but effectively.

我讨厌有人对这门课太疯狂了。 谨慎但有效地使用它。

View Demo 观看演示

翻译自: https://davidwalsh.name/mootools-text-overlap-plugin

mootools