Loading...
東邦ガス
業務用・産業用のお客さま向け 多様なビジネスニーズに応える、ソリューション・機器・システムについてご紹介しています。 業務用・産業用のお客さま
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト - BlocksIt.js
BlocksIt.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 ※jQueryは1.7.1で開発。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="blocksit.js"></script> Step 2: HTML HTMLは対象となる範囲をラッパーで包み、各パネルを同列に配置します。 パネルはデフォルトでdiv要素を対象にしていますが、任意の要素で実装できます。 <div id="container"> <div>パネル</div> <div>パネル</div> <div>パネル</div
別コンテンツをスライド表示するJavaScript「Page Slide」
別のhtmlなどのコンテンツを表示するにはiframeなどがありますが、好ましくありせん。 今回のPage Slideは、簡単かつ刺激的な動きで別コンテンツを表示することができます。 使用方法 Page Slideからjquery.pageslide-0.2.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.pageslide-0.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('a.pageslide').pageSlide({ width: "
[JS]年表や社史など、アニメーションでスライドする時間軸コンテンツを簡単に実装できるスクリプト -Timelinr
jQuery Timelinr [ad#ad-2] Timelinrのデモ Timelinrの実装 Timelinrのデモ デモでは、水平レイアウト、垂直レイアウト、オートプレイの3種類があります。 スライドのアニメーションもかっこいいですが、パネル表示時のズームもいいですね。 デモ：オートプレイ [ad#ad-2] Timelinrの実装 HTML 時間とパネルをそれぞれリスト要素で実装し、divで内包します。 「#timele, #dates, #issues」はデフォルトの設定です。 <div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> <p>Lorem ipsum.
ラジオボタンのデザインをカスタマイズする-その２
本来のラジオボタンは非表示にする。 label要素のclassを状況【非選択／選択中／非選択-マウスオーバ／選択中-マウスオーバ】に応じて書き換える。 選択中の要素を再度クリックする事で非選択の状態に変化させる。 特に修飾等をしていないラジオボタン InternetExplorer Firefox Opera ラジオボタンカスタマイズjavascriptの適用サンプルその１ InternetExplorer Firefox Opera ラジオボタンカスタマイズjavascriptの適用サンプルその２ InternetExplorer Firefox Opera ラジオボタンカスタマイズjavascriptの適用サンプルその３ InternetExplorer Firefox Opera 送信後のURL欄でラジオボタンの送信内容が確認できます。
[JS]複数行の異なる高さのブロックをそれぞれ同じ高さに揃えるスクリプト
画像のサムネイルやテキストを配置したボックスなど、異なる高さのブロックが数多くあっても全ての高さを等しく揃えるスクリプトを紹介します。 Equal Height Blocks in Rows 一行目と二行目では、違う高さで揃えていることに注目してください。 [ad#ad-2] デモでは異なる高さのブロック（スクリプトオフ時）が、スクリプトによって行ごとに同じ高さに等しく揃えています。 デモページ 実装のアイデアとなったのは、「Making DIVs, using the CSS "Float Left" property...」とのことで、そのdiv要素がどの横列に属しているか調べ、その中で一番高いものに揃えています。 [ad#ad-2] 実装方法 HTML 画像やテキストを配置できるdiv要素を使用しています。 <div id="page-wrap"> <div></div> <div>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home
Mercedes-AMG | E PERFORMANCE and fully electric models
ハタチのチカラ | MEJIRO UNIVERSITY 20TH
TOYOTA | あそびの天才親子プロジェクト by シエンタ