簡単に概要画像のマウスオーバーでポップアップを作成できるimgPreviewが公開されています。



作者のホームページからデモを見ることが出来ます。

imgPreview


以下のコードは<a id=mgpreview-demo>の文字列に概要画像を見せる場合となります。

$('#imgpreview-demo a').imgPreview({
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).stop().css({opacity:0});
    },
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});

ソースコードも非常に軽いですし、非常に使いやすそうな印象です。


超簡単！jQueryを使用した概要画像をポップアップ - imgPreview

簡単にWeb UIを作成できるJavascripライブラリが公開されています。


以下のような画面がJavascriptで実現されています。


デモ画面




これはすごいです。
簡単に、しかもきれいにWebアプリケーションを作成するのに非常に使えそうです。


こういうものを見ると開発意欲がわいてきますね。


すばらしくきれいなUIを実現するJavascript - mochaui

Ultra versatile slider for websitesにて左右にスライドするJavascriptの実装例が公開されています。




実装例や、コードもサイトからダウンロード可能です。
動かしてみた感じは非常に軽く、コードも簡単で今すぐ追加できそうです。

実装例


いろんなインスピレーションが生まれそうですね。

Ultra versatile slider for websites