mootools_MooTools Kwicks插件

mootools

I wrote a post titled Get Slick with MooTools Kwicks ages ago. The post was quite popular and the effect has been used often. Looking back now, the original code doesn't look as clean as it could. I've revised the original Kwicks code so that Kwicks is laid out in the form of a standard MooTools plugin.

几年前，我写了一篇题为《用MooTools Kwicks获得Slick》的文章。 该帖子非常受欢迎，并且效果经常被使用。 现在回头看，原始代码看起来并不干净。 我已经修改了原始的Kwicks代码，以便以标准MooTools插件的形式布置Kwicks。

View Demo 观看演示

HTML (The HTML)

<div id="kwick">
	<ul id="kwicks">
		<li><a class="kwick john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon"><span>John Lennon</span></a></li>
		<li><a class="kwick paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney"><span>Paul McCartney</span></a></li>
		<li><a class="kwick george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison"><span>George Harrison</span></a></li>
		<li><a class="kwick ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr"><span>Ringo Starr</span></a></li>
	</ul>
</div>

The Kwicks system works based off of an HTML list containing list items with links.

Kwicks系统基于HTML列表工作，该列表包含带有链接的列表项。

CSS (The CSS)

#kwick						{ width:590px; }
	#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; }

The most key of the selectors is ".kwick" which features "overflow:hidden". Overflow hidden will allow our squeezing of elements.

选择器中最关键的是“ .kwick”，具有“ overflow：hidden”。 隐藏的溢出将允许我们压缩元素。

MooTools JavaScript (The MooTools JavaScript)

var Kwicks = new Class({
	
	Implements: [Options],
	
	options: {
		squeezeWidth: 100,
		maxWidth: 285
	},
	
	initialize: function(list,options) {
		this.setOptions(options);
		this.list = document.id(list);
		this.parse();
	},
	
	parse: function() {
		//vars
		var items = this.list.getElements('a'),
			fx = new Fx.Elements(items, {wait: false, duration: 250, transition:Fx.Transitions.Cubic.easeOut}),
			startWidths = [],
			options = this.options;
		//kwicks items
		items.each(function(item,i) {
			startWidths.push(item.getStyle('width').toInt());
			item.addEvent('mouseenter',function(){
				var fxSettings = {};
				fxSettings[i] = {
					'width': [item.getStyle('width').toInt(),options.maxWidth]
				};
				items.each(function(sibling,ii) {
					if(sibling != item) {
						var w = sibling.getStyle('width').toInt();
						if (w != options.squeezeWidth) {
							fxSettings[ii] = {
								'width': [w,options.squeezeWidth] 
							};
						}
					}
				},this);
				fx.start(fxSettings);
			},this);
		},this);
		//list
		this.list.addEvent('mouseleave',function() {
			var fxSettings = {};
			items.each(function(item,i) {
				fxSettings[i] = {
					width: [item.getStyle('width').toInt(), startWidths[i]]
				};
			});
			fx.start(fxSettings);
		});
	}
});

/* USAGE */
window.addEvent('domready',function() {
	var kwicks = new Kwicks('kwicks');
});

Unlike my original post, this implementation works off of the MooTools Class system. The class is small and features only one real method but the class' code is also much cleaner than my original implementation!

与我的原始文章不同，此实现在MooTools Class系统上有效。 该类很小，仅具有一种实际方法，但是该类的代码也比我的原始实现干净得多！

View Demo 观看演示

The Kwicks effect is tasteful, smooth, and attention-grabbing. I recommend adding this to any website that could use a bit of dynamism.

Kwicks效果既有品位，光滑又引人注目。 我建议将其添加到任何可能需要一点动力的网站上。

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

mootools