mootools_使用MooTools创建动画滑动按钮-白红宇

mootools

Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a which provided a great method for making button have an unexpected pop. Here's a quick tutorial on how to duplicate that look using MooTools.

按钮(或链接)通常是我们要吸引很多注意力的站点上的元素。不幸的是，很多时候他们最终看起来最无聊。不过，您不必让这种情况发生！我最近发现了一个，该提供了一种使按钮产生意外弹出的好方法。这是有关如何使用MooTools复制外观的快速教程。

HTML (The HTML)

The system works off of one DIV, two As and SPAN elements. Note the IDs and CSS classes for the CSS.

该系统基于一个DIV，两个As和SPAN元素工作。注意CSS的ID和CSS类。

CSS (The CSS)

.button_wrap{ position:relative; width:225px; height:36px; overflow:hidden; font-weight:bold; font-size:11px; margin:10px; }.button_aLeft{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; right:0px; position:absolute; line-height:36px; text-align:left; }.button_aLeft span{ /* display:none; */ visibility:hidden; padding-left:20px; color:#fff; }.button_aRight{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; left:0px; position:absolute; line-height:36px; text-align:right; }.button_aRight span{ /* display:none; */ visibility:hidden; padding-right:20px; color:#fff; }.button_bLeft{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; right:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer; }.button_bLeft span{ color:#008ddd; }.button_bRight{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; left:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer; }.button_bRight span{ color:#008ddd; }.button_c{ background-color:#008ddd; color:#fff; text-transform:uppercase; }.button_c span{ color:#093d6f; }

The CSS code above mirrors the original code with the exception that "display:none;" was changed to "visibility:hidden", per the differences in MooTools and jQuery fading methodology. Feel free to modify the basic color/formatting styles in any way you'd like.

上面CSS代码反映了原始代码，但“ display：none;”例外。根据MooTools和jQuery淡入方法的差异，更改为“ visibility：hidden”。随时以您想要的任何方式修改基本的颜色/格式样式。

MooTools JavaScript (The MooTools JavaScript)

window.addEvent('domready',function() {	$$('.slidebttn').each(function(btn) {		var prev = btn.getPrevious('a').set('tween',{ duration: 200 });		var span = prev.getElement('span');		btn.addEvents({			mouseenter: function(e) { 				btn.addClass('button_c');				prev.tween('width',225);				span.fade('in');			},			mouseleave:function(e) {				btn.removeClass('button_c');				prev.tween('width',70);				span.fade('out');			}		});	});});

The first step is grabbing all button containers and identifying the SPAN and A elements within them. Then we add mouseenter and mouseleave events to the container which do the animation of the primary A/SPAN elements.

第一步是抓取所有按钮容器并标识其中的SPAN和A元素。然后，我们将mouseenter和mouseleave事件添加到容器中，以对主要A / SPAN元素进行动画处理。

Great work by Tympanus. The effect is classy and well executed. Now go and use this on your next project!

鼓膜的伟大工作。效果是一流的，执行得很好。现在开始在下一个项目中使用它！

翻译自:

mootools