タグ

2018年5月25日のブックマーク (3件)

  • 超簡単!jQueryでアニメーション付き開閉式ボックスを作成してみた - すずろぐ

    こんばんは、すずしんです。 前回の記事で、jQueryの簡単な読み込み方について書きましたので…。 何だかjQueryのプログラムを書いてみたい気分になりました。 そこで、私はちょっとしたjQueryのサンプルプログラムを作成してみました。 そのサンプルプログラムでは「アニメーション付き開閉式ボックス」を実装してみました。 さすがjQueryで、パパッと簡単に作ることができましたよ! せっかくなので、今回作成したサンプルプログラムを記事に載せておこうと思います。 需要があるかどうかは分かりませんが…。 誰かの役に立てれば光栄です。 開閉式ボックスとは? アニメーション付き開閉式ボックスのサンプルプログラム サンプルプログラムの実行例 ひとこと 開閉式ボックスとは? ここでいう所の開閉式ボックスというのは…。 展開用のリンクをクリックすると、スライドしながら現れるdiv要素の事を言います。

    超簡単!jQueryでアニメーション付き開閉式ボックスを作成してみた - すずろぐ
  • jQuery【 CSS 】display を使用した表示・非表示に関するサンプル - プログラマカレッジ

    1. display で表示・非表示 jQuery で CSS の display プロパティを変更して、HTML 要素の表示・非表示を切り替えます。 各ボタンをクリックしてみて下さい。 上のサンプルのソースコードは次の通りです。 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function() { $("#nonBtn").click(function() { // 非表示に設定 $("#pinkBox").css("display", "none"); }); $("#blockBtn").click(function() { // 表示に設定 $("#pinkBox").css("display", "block"); });

    jQuery【 CSS 】display を使用した表示・非表示に関するサンプル - プログラマカレッジ
  • 【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。

    投稿日:2014年9月24日 更新日:2014年9月24日 JavaScript, jQuery 1672文字:約3分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/1715 一時期、多くのサイトで導入され大流行した jQuery プラグイン[Lightbox]の使い方を紹介します。 皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。 画像をクリックすると背景が暗くなり、指定された画像がズームして再表示されます。 Lightbox:サンプル・デモ まずは公式サイトより、[Lightbox]のデータ一式をダウンロードしてきます。 Lightbox:ダウンロード ダウンロードした zip ファイルを展開すると、いくつかのフォルダとファイルが解凍されます。 基的に、使用するのは「js」フォルダの中にある[ligh

    【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。