プラグイン不要！たった数行でdiv要素にｊQueryLightBoxを実装する
プラグイン不要！たった数行でdiv要素にjQueryLightBoxを実装する 久々にjQueryネタ。LightBoxってjQueryプラグインの定番中の定番の気もしますが、プラグインに頼らず超簡単に、Javascript(jQuery)部分はたった数行で書けてしまいますよ！ DEMO jQuery あらかじめhead内にjQueryの読み込みだけはして下さいね。 $(document).ready(function(){ //show-panelボタンをクリックしたらLightBoxを表示する $("a#show-panel").click(function(){ $("#BlackWindow, #lightbox-panel").fadeIn(300);/*表示速度は数値を調整*/ }) //CloseボタンをクリックしたらLightBoxを閉じる $("a#close-panel
竹取 JS
画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには？ とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意！ やや動作が重いです！ うまく変換できなかったときは、画面をダブ
[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent
デモ：カルーセル機能付きのスライダー：垂直方向 jContentの実装 実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。 HTML <div id="demo"> <a title="" href="#" class="prev"></a> <div class="slides"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div> <a title="" href="#" class="next"></a> </div> JavaScript <script type="text/javascript" language="javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/j
jQueryでページ遷移時にアニメーション効果をつけてみる。｜BLACKFLAG
Webサイト上でリンクをクリックした際、通常のページ遷移では画面がパッと切り替わるだけ。 何か味気ない感じもするので、画面が切り替わる際にフェードアウト ＆ フェードインしたり、 スライドアウト ＆ スライドインなどのアニメーション効果をつければ、 また違った演出が加えられるのではないかと考え、試してみた実験サンプルのご紹介。 サンプルではトップページは“フェードイン”、 「次へ」といったリンクをクリックしてページ遷移をした際に ページ全体がスライドアウト／インして遷移するパターンになります。 まずはサンプルから サンプルはこちら：パターン１※「次へ」をクリックしていくとページ全体がスライドして遷移します。 このパターンのSCRIPTは以下のような感じで実装。（もちろん別途、要jQueryファイル） ◆SCRIPT $(function(){ $('#container:not(body#
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
