JavaScript framework kütüphaneleri ile uygulanmış bir kaç örnek ve kodları ..
1 - Puzzel uygulaması (Online Bulmaca)
puzzel
Kaynak Konu :
(function() { var p = $('puzzle'), info = $('puzzleinfo'), moves = 0; Sortable.create('puzzle', { tag: 'img', overlap: 'horizontal', constraint: false, onUpdate: function() { info.update('You\'ve made ' ( moves) ' move' (moves > 1 ? 's' : '')); if (Sortable.sequence('puzzle').join('') == '123456789') info.update('You\'ve solved the puzzle in ' moves ' moves!').morph('congrats'); } });
})();
2 - List Morph Demo
List Morph Demo
Bu uygulama Liste şeklinde yazılmış yazıların yerlerini üzerine tıklanınca ramdom olarak değiştiriyor... uygulamayı görmek için burayı tıklayın. Nasıl Yapıldığı konusunda buradan bilgi edinebilirsiniz. Kaynak Kodu :
Array.prototype.shuffle = function() { return this.sortBy(Math.random);
};(function() { function foo() { $('scripty_morph_demo').select('div').shuffle().each(function(e, i) { e.morph('top:' + i*e.getHeight() + 'px', { duration: 0.4 }); }); } $('scripty_morph_demo').observe('click', foo); foo();
})();
3 - Effect.Highlight (Aydınlanma Efekti)
Aydınlanma - 1
Aydınlanma - 2
Aydınlanma - 3
Kanak Kodu :
<p id="highlight_demo" style="padding:10px; border:1px solid #ccc; background:#ffffff;">
Kutucuğu aydınlatmak için aşağıdaki linki tıkla...
<a href="#" onclick="new Effect.Highlight(this.parentNode, { startcolor: '#ffff99',
endcolor: '#ffffff' }); return false;">
Highlight me!(Aydınlat Beni!)
</a>
</p>Daha Fazla Javascript ve Demo uygulamalar için buraya Javascript Framework Örnekleri için buraya gözatabilirsiniz... Örnek uygulamalar ve Önizlemeler mevcut...
