10のjQueryスニペット

JavaScript

Webデザイナーが知っておくべき10のjQueryスニペット

すべてのWebデザイナーが知っておくべき10のjQueryスニペットがとても役立ちそうな感じがしたのでご紹介します。どれも簡単なコードで非常に実用的なことが書かれているのでjQueryを扱っている方は一度目を通しておくとよさそうですね。

[ads_center]

実用的で役立つコード集

10のjQueryスニペット

10 jQuery snippets every designer should know | Webdesigner Depot

以下は個人的にいいなーと思ったものです。

トップへ戻るボタン

色んなサイトでよく見かける機能ですね。文章の先頭にスクロールしながら戻ってくれます。

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class="top" href="#">Back to top</a>

画像の読み込みが失敗した時の置き換え

リンク切れなどといった画像が上手く読み込めない時に替わりの画像に置き換えてあげる処理。

$('img').error(function(){
$(this).attr('src', 'img/broken.png');
});

divの高さを同じに揃える

これは覚えておきたいところ。

$('.div').css('min-height', $('.main-div').height());

こんな感じで役立つTipsがたくさんあります。これらの他にも、

  • 画像の読み込みをチェック
  • ホバー時にCSSを切り替え
  • 送信ボタンを無効
  • リンクの読み込みを停止
  • クリック時にフェード or スライド
  • シンプルなアコーディング
  • リストをストライプ模様

といったものがあるので興味がある人は一度チェックしてみてはいかがでしょうか。

Naverシンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」前のページ

ドットナビゲーションスタイルの色んなパターンについて次のページドットナビゲーションスタイル

関連記事

  1. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  2. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  3. simplePagination.js
  4. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

  5. Before and after slider
  6. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP