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 スライド
  • シンプルなアコーディング
  • リストをストライプ模様

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

関連記事

  1. Responsive Parallax Drag-slider With Transparent Letters
  2. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  3. autoscroll.js

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

  4. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  5. Bootstrap Dropdown Hover
  6. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP