mootools_通过MooTools Kwicks获得润滑-白红宇

mootools

I've created an easy to use MooTools Kwicks plugin which you may .

我创建了一个易于使用的MooTools Kwicks插件，您可以。

When I first saw graphical navigation, I was impressed. I thought it was a very simple yet creative way of using Flash. When I right-clicked and saw that it was JavaScript, I was floored. How could they achieve such a fluid effect using just JavaScript? There began my love of the library and ever since I've used MooTools.

当我第一次看到图形导航时，印象深刻。我认为这是使用Flash的一种非常简单但富有创造力的方式。右键单击并看到它是JavaScript时，我感到非常震惊。仅使用JavaScript如何实现如此流畅的效果？自从我开始使用MooTools以来，我就开始喜欢图书馆。

When it came time for my employer to redo their website, I made it my goal to really jazz up the site with MooTools. Nothing too fancy and nothing too bright, just some simple effects that show attention to detail and a little bit of fun. I then thought it was the time to use MooTools "kwicks" to give the website a little kick.

当我的雇主需要重做他们的网站时，我的目标是使用MooTools真正使网站更加吸引人。没什么花哨的东西，没有太亮的东西，只是一些简单的效果，表现出对细节的关注和一点点乐趣。然后，我以为是时候使用MooTools的“诀窍”来给网站加个踢了。

步骤1：建立图片 (Step 1: Create Images)

You'll need an image for kwick, obviously. Make them all the same width. Below are my images, all 285 pixels x 143 pixels. Black borders have been added to show you image dimensions.

显然，您需要一张用于kwick的图像。使它们都具有相同的宽度。以下是我的图像，均为285像素x 143像素。 添加了黑色边框以显示图像尺寸。

步骤2：HTML (Step 2: The HTML)

Showing the HTML first will give you a good idea of how kwicks are structured.

首先显示HTML可以使您很好地了解kick的结构。


    	
     		
      John Lennon
		
      Paul McCartney
		
      George Harrison
		
      Ringo Starr

步骤3：CSS (Step 3: The CSS)

There's minimal CSS involved in this process so don't worry about stylesheet bloat.

此过程涉及CSS最少，因此不必担心样式表膨胀。

#kwick				{ width:590px; }#kwick .kwicks 			{ height:143px; list-style-type:none; margin:0; padding:0; }#kwick li 			{ float:left; }#kwick .kwick 			{ display:block; cursor:pointer; overflow:hidden; height:143px; width:134px; }#kwick .kwick span 		{ display:none; }#kwick .john 			{ background:url(kwicks/john.gif) no-repeat; }#kwick .paul 			{ background:url(kwicks/paul.gif) no-repeat; }#kwick .george 			{ background:url(kwicks/george.gif) no-repeat; }#kwick .ringo 			{ background:url(kwicks/ringo.gif) no-repeat; }

Note the width of the container (#kwick) is not simply all of the image widths added up. I've experienced odd "wraps" with quicks where they fall to the next line. To prevent that I've added one pixel per kwick to the #kwick width. Also note that a kwick's width is set to 134 pixels -- that becomes default width of all kwicks when no kwick hovered over. You also need to declare a class for each kwick, defining its background image.

请注意，容器的宽度(#kwick)并非仅仅是所有图像宽度的总和。我经历过奇特的“换行”，很快就落到了下一行。为了防止这种情况，我在#kwick宽度上为每个千像素添加了一个像素。另请注意，脚位的宽度设置为134像素-当没有脚位悬停时，该宽度成为所有脚位的默认宽度。您还需要为每个分支声明一个类，以定义其背景图像。

步骤3：MooTools 1.2 JavaScript (Step 3: The MooTools 1.2 JavaScript)

The JavaScript can be a bit daunting, but the below code needs very little modification to work for you:

JavaScript可能有点令人生畏，但是下面的代码几乎不需要修改就可以为您工作：

var Kwix = {	start: function(){		Kwix.parseKwicks();	},	parseKwicks: function(){		var squeeze_to = 100;		var max_width = 285;		//get original widths		var start_widths = new Array();		var kwicks = $$('#kwick .kwick');		var fx = new Fx.Elements(kwicks, {wait: false, duration: 250, transition:Fx.Transitions.Cubic.easeOut});		kwicks.each(function(kwick, i){			start_widths[i] = kwick.getStyle('width').toInt();			//mouse is in, squeeze and expand			kwick.addEvent('mouseenter', function(e){				var obj = {};				obj[i] = {					'width': [kwick.getStyle('width').toInt(), max_width]				};				var counter = 0;				kwicks.each(function(other, j){					if (other != kwick){						var w = other.getStyle('width').toInt();						if (w != squeeze_to) obj[j] = {'width': [w,squeeze_to] };					}				});				fx.start(obj);			}			);		});		//mouse is out, squeeze back		$('kwick').addEvent('mouseleave', function(e){			var obj = {};			kwicks.each(function(other, j){				obj[j] = {'width': [other.getStyle('width').toInt(), start_widths[j]]};			});			fx.start(obj);		});	}};//lock and load!window.addEvent('domready',Kwix.start);

You only need to edit two lines of code in this example: 9 and 10. Nine defines the "squeeze" width of each kwick: how slim do you want blurred kwicks? Line 10 defines the maximum width of a kwick, which you'll likely want to be the full width of your image.

在此示例中，您只需要编辑两行代码：9和10。Nine定义每个脚蹬的“挤压”宽度：您想要模糊的脚蹬有多细长？第10行定义了一个分支的最大宽度，您可能希望将其作为图像的整个宽度。

就这样？ (That's All?)

Absolutely! Your navigation goes from...

绝对！您的导航来自...

...to...

...至...

翻译自:

mootools