mootools
A few weeks back, jQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. I was impressed by Janko's article so I decided to port the effect to MooTools.
几周前，jQuery专家Janko Jovanovic发表了一篇精彩的教程，向您展示了如何使用jQuery创建类似于Skype的按钮 。 Janko的文章给我留下了深刻的印象，因此我决定将效果移植到MooTools。
View Demo
观看演示
XHTML (The XHTML)
<a class="skype-button" href="#"><img src="skype-button.png" alt="Button" />Contact Us!</a>
This is the exact code provided by Janko.
这是Janko提供的确切代码。
CSS (The CSS)
.skype-button {
padding:4px 10px 3px 25px;
border:solid 1px #8AB134;
position:relative;
cursor:pointer;
display:inline-block;
background-image:url('skype-bkg.png');
background-repeat:repeat-x;
font-size:11px;
height:16px;
text-decoration:none;
color:#40740D;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
.skype-button img {
position:absolute;
top:-4px;
left:-12px;
border:none;
}
.skype-button:hover {
color:#8AB134;
}
This too is the exact code provided by Janko.
这也是Janko提供的确切代码。
MooTools JavaScript (The MooTools JavaScript)
window.addEvent('domready',function() {
$$('a.skype-button').each(function(el) {
var img = el.getElement('img'), running = false;
var fx2 = new Fx.Morph(img, {duration: 100, link: 'chain', onChainComplete:function() { running = false; } });
var fx1 = new Fx.Morph(img, {duration: 200, link: 'chain', onComplete:function() {
fx2.start({'top':'-7px'}).start({'top':'-4px'}).start({'top':'-6px'}).start({'top':'-4px'});
}
});
el.addEvent('mouseenter',function() {
if(!running) {
fx1.start({'top':'-10px'}).start({'top':'-4px'});
running = true;
}
});
});
});
We use dualing FX instances to create the bounce. Fx.Transitions doesn't currently allow for this bounce effect and MooTools' chain functionality didn't display the effect as nicely.
我们使用双重FX实例创建反弹。 Fx.Transitions当前不允许这种反弹效果，并且MooTools的链功能无法很好地显示该效果。
View Demo
观看演示
Props to Janko for his original article!
支持Janko的原创文章！
翻译自: https://davidwalsh.name/skype-mootools
mootools
相关资源：jdk-8u281-windows-x64.exe
