mootools_MooTools墙插件

mootools

One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show you a quick usage of the Wall!

Marco Dell'Anna撰写的The Wall是最近在Forge上推出的最令人印象深刻的MooTools插件之一。 墙创建了一个无限的网格元素，可以抓住和拖动这些元素，并在遇到元素时逐渐消失。 让我告诉您快速使用Wall！

View Demo 观看演示

HTML (The HTML)

There are two elements in the setup: a viewport and a wall holder:

设置中有两个元素：视口和墙固定器：

<div id="viewport">
	<div id="wall"></div>
</div>

Easy enough.

很简单。

CSS (The CSS)

The CSS must be configured to accommodate your wall.  Your viewport's height and width properties should be multiples of your block heights.  You don't have to configure the viewport that way, but it you wall will be more visually appealing.

CSS必须配置为适合您的墙。 视口的height和width属性应该是块高度的倍数。 您不必配置视这种方式，但你壁会更加悦目。

#viewport		{ border:1px solid #ccc; width:450px; height:450px; position:relative; overflow:hidden; }
#wall			{ z-index:1; }
#wall img		{ width:150px; height:150px; display:block; float:left; }

My viewport will be 450 x 450, with each element being 150 x 150.

我的视口将为450 x 450，每个元素为150 x 150。

MooTools JavaScript (The MooTools JavaScript)

It all starts by creating a Wall instance, providing width, height, rangex, and rangey attributes, providing them as the size of the elements (or not):

这一切都始于创建Wall实例，提供width ， height ， rangex和rangey属性，并将它们提供为元素的大小(是否提供)：

// When the DOM is ready
window.addEvent("domready", function() {
	
	// Define a few variables, including the number of images and the "current index"
	var numImages = 23, // 24 images, 0 index
		counter = 0;
		
	// Create the Wall
	new Wall("wall", {
		width: 150,
		height: 150,
		rangex: [-150,150],
		rangey: [-150,150],
		callOnUpdate: function(items) {
			// For every item returned...
			items.each(function(item) {
				// Inject a new image, fade it in
				new Element("img", {
					src: (++counter) + ".jpg",
					styles: {
						opacity: 0
					}
				}).inject(item.node).fade(1);
				// Reset to image one if the maxlength is greater than the counter
				if(counter > numImages) counter = 1;
			});
		}
	}).initWall();	
});

The callOnUpdate method is most important, providing an index by which you can inject your new element (in our case, an image).  Once the counter reaches its maximum length, the index is reset, and the wall continues!

callOnUpdate方法最重要，它提供一个索引，通过该索引可以插入新元素(在我们的示例中为图像)。 一旦计数器达到其最大长度，索引将被重置，墙将继续！

View Demo 观看演示

Awesome work by Marco.  My example is just the most basic of usages -- visit Marco's website to see the additional options and examples he has provided.  I can see someone using The Wall to generate a very creative, all-encompassing website!

Marco的出色工作。 我的示例只是最基本的用法-访问Marco的网站以查看他提供的其他选项和示例。 我可以看到有人使用《华尔街日报》生成了一个非常有创意的，无所不包的网站！

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

mootools