132 Несколько недель назад, JQuery эксперт Янко Йованович выпустил статью о том, как создавать Skype кнопки на jQuery, продолжая его статью, попробуем сделать такие кнопки на MooTools фреймворке.
XHTML
|
1 |
<a class="skype-button" href="#"><img src="skype-button.png" alt="Button" />Contact Us!</a> |
Этот код от Янко.
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.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; } |
MooTools JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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; } }); }); }); |
Получилось очень похоже, но не совершенно.
