[JS]スマホ・デスクトップに対応したインタラクティブなマップが作成できるスクリプト -Leaflet
jQueryなど他のスクリプトに依存せずに、インタラクティブなマップを作成できる軽量のスクリプトを紹介します。 Leaflet - a modern, lightweight JavaScript library for interactive maps デモページ [ad#ad-2] Leafletは、ユーザビリティ、パフォーマンス、サイズ、フレキシビリティを重視して開発されており、デスクトップとモバイルの主要なブラウザでインタラクティブなマップを作成できるBSDライセンスのスクリプトです。 Leafletの主な特徴 タイルレイヤー マーカー、ポリゴン、ポリライン、サークルの設置 ポップアップ イメージのオーバーレイ ドラッグ操作でパン ホイール・ダブルクリックでズーム Shift+ドラッグでバウンディングボックス タッチドラッグでパン（スマホ） マルチタッチでズーム（iOS） ダブルタ
[JS]複数のエレメントをフェードのアニメーションで華麗に表示するスクリプト
Display Elements Sequentially with jQuery デモページ [ad#ad-2] 実装は非常にシンプルです。 HTML デモでは、画像をリスト要素で配置しています。 <ul> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> </ul> HTML アニメーションのトリガーとなるのは、「Show Images」のテキストリンクを使用しています。 <p style="clear: both; display: none;
JavaScriptでデータをダンプする「jQuery Dumpプラグイン」
PerlのData::DumperやPHPのvar_dump()のようなことをJavaScriptで行える「jQuery Dumpプラグイン」を紹介します。 jQuery Dump １．サンプル jQuery Dumpを使ってデータをダンプするには次のように設定します（青色部分）。 <pre id="dump"></pre> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.dump.js"></script> <script type="text/javascript"> $(function(){ var obj = { hubba: "Some string...", bubba: 12.5, dubba: ["One"
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード： CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング： jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート： あらゆるデータからソートが行えます。 各機能の互換性： レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化： Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ（IEなど）は、JavaScriptでアニメーションを実現します。 Isotopeの実装
[JS]テキストの一部のみ最初に表示し、残りをアニメーションで表示するスクリプト
パネルに配置したテキストを下部にいくにつれフェードアウトで表示し、残りのテキストをアニメーションで表示するコンテンツを実装するチュートリアルを紹介します。 残りのテキストをアニメーションで表示したキャプチャ [ad#ad-2] 実装 HTML HTMLはシンプルで、テキストと「Read More」ボタンをdiv要素内に配置します。 <div class="sidebar-box"> <p>パネルのテキスト</p> <p class="read-more"><a href="#" class="button">Read More</a></p> </div> CSS パネルの初期状態のサイズはスタイルシートで設定します。フェードアウトはCSS3グラデーションを使用します。 .sidebar-box { max-height: 120px; position: relative; overfl
個人的に使うことが多い9つのjQuery・JavaScriptスニペット :: 5509
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。 コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。（もっときれいに書けとか何そのコードとかも歓迎） 紹介してるスニペットたち ページトップにスクロールするだけ テキストボックスにラベル表示するやつ 要素のサイズを取得するやつ タブきりかえるやつ IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide() Google Analyticsのトラックイベント一括bind Ajaxサイトにするときに使うリンク置き換えプラグイン スク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
