We'll be back soon! Our site is currently undergoing maintenance. Please check back later.
少ないスペースに一杯情報を埋め込めるクールなアコーディオン実装jQueryプラグイン「Easy Accordion」 2010年10月04日- jQuery plugin: Easy Accordion | Andrea Cima Serniotti 少ないスペースに一杯情報を埋め込めるクールなアコーディオン実装jQueryプラグイン「Easy Accordion」。 次のようなクールなアコーディオンが簡単に実装することが出来ます。 コンテンツをタイマーで自動的に切り替えることも可能 コンテンツは次のように定義しておいて後はjQueryでやってくれるというもの。 <div id="accordion-2"> <dl> <dt>Slide title</dt> <dd><h2>First mammoth here</h2><p><img src="images/mammoths/img1.p
リスト要素の項目をフェードやスライドのアニメーションで表示するシンプルなティッカーのスクリプトを紹介します。 Super simple jQuery ticker デモページ デモではリスト要素の各項目が自動で次々に表示され、スクリプトのオプションでは表示方法(フェード・スライド)とアニメーションのスピードが設定できます。 実装はシンプルで、HTMLは下記のようになります。 HTML 「id="fade"」は変更可能です。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="fade"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ul> </textar
画像だけでなく、ページ内のさまざまな要素をダイナミックなアニメーションでズームイン・アウト、回転させるjQueryのプラグインを紹介します。
テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど高性能な上、超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか? jQuery plugin: Easy Accordion デモページ [ad#ad-2] Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。 自動スライド、手動スライドの切り替えが可能。 同一ページに複数のアコーディオンを配置可能。 初期表示に任意のスライドを指定可能。 画像を使用しないで設置可能。 カスタマイズが容易(高さ・幅・ボーダー・背景画像など) アクセシブルで、SEOにもフレンドリー。 さまざまな
Just about every website uses the regular navigation concepts we're all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn't new, it's certainly not common. A few days ago, Jeffrey posted about a potential "outside the box" competition on ThemeForest to encourage authors to put on their creativity hats a
In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. Ok, so let’s get started. The Markup The HTML will consist of a main div that we will give the class navigation and the id nav. Inside of the main div we will have the na
Other Information Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor. Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies. Morbi a magna eu ligula scelerisque lobortis vel non nisi. Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida. Queenie's Kille
DOMを使用する コンテンツの表示、非表示 マウスオーバーで写真やテキストが入れかわる 文字の拡大、縮小 ロールオーバー JavaScriptを使ったフォームチェック (DOMは使っていません・・・。) jqueryを使用する jqueryを使ったフェイドイン、フェイドアウト コンテンツの表示、非表示 テキストリンクをアニメーションでスムーズにスライドさせるスクリプト コンテンツをスムーズなアニメーションで開閉するスクリプト jqueryベースのJSライブラリの紹介 フィールド間を自動でタブ移動してくれる入力補助 - Autotab パズルゲーム - jqPuzzle パネルがスムーズにスライドするスクリプト - Accessible News Slider jQueryでiGoogle風のインターフェイス - inettuts フラッシュのようにダイナミックに切り替えるスクリプト - s
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice
画像を16枚に [ad#ad-2] Slidawallは2タイプ用意されています。 画像の拡大表示のみ 画像の拡大表示+ディスクリプション表示 設置は簡単で、ダウンロードフィルの「libフォルダ」をコピーし、「example」内のHTMLの画像を変更するだけです。 HTMLは下記のようにシンプルなものになっています。 HTML: example/simple.html <section id="example-1"> <article data-image="img/1.jpg"></article> <article data-image="img/2.jpg"></article> <article data-image="img/3.jpg"></article> <article data-image="img/4.jpg"></article> <article data-ima
よくFlashなんかではありそうですね。 クリックする事でドロップダウンメニューが開くようになっています。 設置方法 jqueryとプラグインを読み込みます。 <link href="malihu.cfm.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> あとは指定のdivタグでメニューの構造を定義するだけになります。 ↑ Home About me + Work Recent Web Print
自分のページだけでなく、閲覧している他人のページでも見出しを抽出し、ページ内アンカーの機能も与えるjQueryのプラグインを紹介します。 Flexible Nav jQuery library デモページ 抽出した見出しの一覧は、右側に表示されています。 [ad#ad-2] 閲覧中のページで見出しを抽出する方法 まずは、閲覧中の他人のページで見出しを抽出する方法からご紹介。 Flexible Navはブックマークレット版があるので、それを利用します。 ブックマークレット Flexible Bookmarklet このブックマークレットをブックマーク(お気に入り)に登録して閲覧ページでクリックしてください。 ※上記をクリックすると、このページで適用されます。 当サイトでFlexible Navを実行したキャプチャ Flexible Navを実行すると上記のように、右側に見出しの一覧が表示され
galleryFocus フォーカスした周辺をアニメーションでフェードさせ、中心をくっきり見せるギャラリー。 [ad#ad-2]
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く