POPSブログ

jQuery簡易シリーズ記事の案内

59

  Category:  jquery2012/03/21 pops 

jQueryで作る、シリーズ記事などの案内です。大まかに、FADER SLIDER SLICE TRANSITION SLIDESHOW Accordion POPS-iBOX関連 伸縮するパネル hover() HoverMenu tooltip mouseovertooltip Tabs に分類しています。
一般的に「Accordion」と呼ばれているものを「アコーディオン」とし、その外特殊なものは「バーチカルアコーディオン」などと分類しました。

 

jQuery簡易シリーズ記事の案内


IEでは動作が重いため、閲覧には「Google Chrome」を推奨します。(2014/04/25 現在のまとめ)

 


[ jQuery簡易シリーズ記事、及び関連記事 目次 ]


 

その他、最近のjQuery関連記事


Javascript IE10 IE11 のブラウザ判定

JQuery等でどうしてもブラウザ判定をしなければならない時があります。IE10 IE11 を含む簡単なブラウザ判定です。当方のJS用に作成したものです。

jQuery 単純簡易 LightBox CSS3角丸陰影、HTML5専用タイプB

jQueryで作った「LightBox」であるが、CSS3による角丸陰影形式で「HTML5専用」タイプに仕上げてみた。前ページのJSと違い、上下にテキストなしの単純簡易な形式で、ありふれた簡単な構造ですからCSSも簡略されています。画面一杯に拡大したサイズでの表示が可能です。原則「IE7.8」には対応しません。2.0系のjquery-2.0.1.min.jsでのテストです。

jQuery 簡易 LightBox CSS3角丸陰影、HTML5専用タイプ

jQuery 簡易 LightBox CSS3角丸陰影、HTML5専用タイプ jQueryで作った「LightBox」であるが、CSS3による角丸陰影形式で「HTML5専用」タイプに仕上げてみた。CreateJSでの「LightBox」と比較する意味もある。当方の「LightBox」はパネルの殆んどが角丸陰影で出来ており、上下にテキストのスペースを持ち画像と共にパネルが拡大するのが特徴です。2.0系のjquery-2.0.1.min.jsでのテストです。

jQuery setTimeout自動縦形コンテンツスライダー 下降知らずの上昇専用タイプ

下降なしの、疲れを知らない上昇専用タイプ、setTimeout付きの自動上昇「コンテンツスライダー」なのだ。昇れ昇れ、宇宙のはてまでイッテQ。

jQuery setTimeout自動縦形コンテンツスライダー ALL-SLIDEタイプ

ニュースサイトなどで見かける事がある、setTimeout利用の「コンテンツスライダー」です。自動のアコーディオンと似通っているところもありますが、全部一緒にスライドします。

jQuery setTimeout自動開閉アコーディオン、HOVERタイプ

ニュースサイトなどで見かける事がある、setTimeout利用「自動のアコーディオン」です。「HOVER」して開く事も出来ます。「クリック」タイプを「HOVER」タイプに改造しました。

コーナープラグインjquery.corner.jsをjQuery-1.9以上で使用する改造テスト

jQuery-1.9から「jQuery.browser」($.browser) がサポートされなくなりましたので、jQuery-1.9以上で「jquery.corner.js」を使用出来ません。そこで使用出来るようにテスト的に修正してみました。

jQuery 自動開閉アコーディオン 快気祝いだ!

拝啓、毎度お馴染み、jQuery slideToggle()で作った、自動開閉アコーディオンですが、早速、胃腸科で診断結果「腸ねん転」という事で、3分間手術で「快気祝い」と相成りました。ここに、謹んでご報告申しあげます。胃腸快調絶好調!、只今上下運動中 アーソレ。.....敬具。

jQuery 自動開閉アコーディオン 使用不能不良品

jQuery slideToggle()で作った、自動開閉アコーディオンですが、諸般、家庭の事情により「使用不能」です。尚、この記事は「祝、200ページ達成記念」ページです。

jQuery setTimeout自動開閉アコーディオン

ニュースサイトなどで見かける事がある、setTimeout利用「自動のアコーディオン」です。クリックして開く事も出来ます。

jQuery toggleクリック関数を使用しないアコーディオン

jquery クリック関数(アニメ用関数では無い)、toggle() が「非推奨」であり、jquery-1.9系では削除されました。現在jquery-1.9.0.jsが正式にリリースされましたので、toggle()を使用しないアコーディオン (Accordion clickタイプ) について考えてみます。

jQueryで画像分割してスライドする2

前ページの記事のJS、縦長に分割した「ホリゾンタル」スライドに、4ドアのスライドなどを追加しました。

jQueryで画像分割してスライドする

jQueryで、画像を分割 delay() で表示パターンを作り、主に「スライド」をさせます。縦長に分割した「ホリゾンタル」スライドの感じになります。2ドアのスライドも出来ます。

jQueryで画像分割して色々なエフェクト

jQueryで、画像を分割 delay() で表示パターンを作り、色々なエフェクト処理を行ってみます。その都度、画像分割を変化させたりの組み合わせでエフェクトが100種類以上になります。

jQueryで画像分割表示のパターンを作る

jQueryで、画像を分割して、delay()を利用して表示パターンを作り、エフェクト処理を行ってみます。便利なようにdelay()用の複数の「標準的なパターン」を作成する。Chromeの処理が早くなったせいか以外と軽快です。

jQueryで画像分割を変化して表示する

jQueryで、画像を分割して、delay()を利用して表示パターンを作り、エフェクト処理を行ってみます。その都度、画像分割を変化させた形態にした。

jQueryで画像を分割して表示する

jQueryで、画像を分割して、delay()を利用して表示パターンを作り、エフェクト処理を行ってみます。簡単なサンプルでその仕組みと処理過程をみてみます。

jQueryのattr()で画像表示とフェード

jQueryで、画像をimg要素に読み込むにattr()を使用します。フェード、クロスフェードなどの画像処理を行ってみます。

jQueryのattr()で属性を変更して画像表示

jQueryで、画像をimg要素に読み込むに、attr()を使用しsrc属性を変更、画像表示をします。極一般的なものです。

jQuery非同期、Image()で画像読み込み表示

jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。


▲[ 目次 ]


jQuery Tabsシリーズ記事


jQuery Tabs/6

Tabsの形態ではあるが表示するコンテンツを、外部htmlファイルで読み込む、ページ内の指定した要素ブロックを表示するなどの工夫をしてみました。

jQuery Tabs/5

分類上、一応はTabsに属するものと思いますが、画像専用のクロスフェード及びスライドのエフェクトが可能なものにしてみました。

jQuery Tabs/4

前ページ「Tabs 3」の効率化スクリプトを「フエード」出来るように追加改造してみました。構造機能などは同じになります。

jQuery Tabs/3

前ページ「Tabs 1」「Tabs 2」のスクリプトを siblings() を使用せず、効率化したJSです。機能などは同じになります。

jQuery Tabs/2

Tab-Menu等と組み合わせてコンテンツを切り替え表示するものです。前ページの「Tabs 1」の外枠を削除した単純構成のものです。機能などは同じになります。

jQuery Tabs/1

一般的にTab-Menu等と組み合わせてコンテンツを切り替え表示する様式のものをTabsと呼ばれているようです。jquery-UIでも簡単に作れますが、ライブラリーを使うほどでもない場合に自作するのも簡単です。


▲[ 目次 ]


jQuery mouseover tooltipシリーズ記事


jQuery mouseover tooltip/4

hover()タイプ「tooltip 6」に遅延タイマー(setTimeout)を組み込み、mouseover()タイプに仕上げています。エフェクトのタイプは「拡大」「移動フェード」または「単なる表示」の指定ができます。尚、hover()形式には簡単に書き換え可能です(hover()形式JS収録)。

jQuery mouseover tooltip/3

hover()、mouseover()、どちらもマウスが乗ればツールチップを直ぐ表示しますが、直ぐに反応しない様に、遅延タイマー(setTimeout)を組み込んでいます。エフェクトのタイプは「フェード」または「単なる表示」の指定ができます。オーソドックスな仕様です。尚、hover()形式のJSも掲載しました。

jQuery mouseover tooltip/2

hover()、mouseover()、どちらもマウスが乗ればツールチップを直ぐ表示しますが、アニメ形式では「お祭り騒ぎ」です。直ぐに反応しない様に、遅延タイマー(setTimeout)を組み込んでみます。

jQuery mouseover tooltip/1

前ページまでの tooltip は hover() を使用しましたが、これは、mouseover()、mouseout() を使用しました。チップ横幅をJSで変更できるようにして、高さを自動で決定しますので、文章の長さを気にする必要はありません。


▲[ 目次 ]


jQuery tooltipシリーズ記事


jQuery tooltip/8

一般的に紹介されている、簡単単純なツールチップ(tooltip)です。簡単に作れますので自作した方が使い勝手が良いかも知れません。デザインも自由になります。これに遅延するように、setTimeoutを組み込んでみました。

jQuery tooltip/7

hover()タイプ「tooltip 6」に遅延タイマー(setTimeout)を組み込みました。エフェクトのタイプは「拡大」「移動フェード」または「単なる表示」の指定ができます。前ページのmouseover()形式と同じですが、「拡大」のエフェクトを増やしました。

jQuery tooltip/6

前ページ tooltip 5は 「移動フェードイン、アウト」ツールチップに「クローズボタン」付きの機能を追加したものです。それを「クローズボタン有り」の場合に em要素を取り込める様に改造しました。つまりリンクなども可能になります。CSS3装飾、高さ自動修正。

jQuery tooltip/5

前ページの、GIF背景画像を「移動フェードイン、アウト」ツールチップに「クローズボタン」付きの機能を追加したものです。状況に応じて、クラスで「ボタン無し」「ボタン有り」の設定が可能です。

jQuery tooltip/4

要素ごとに複数個のツールチップ(tooltip)を作成する方法で、GIF背景画像を「移動フェードイン、アウト」します。簡単に作れますので自作した方が使い勝手が良いかも知れません。デザインも自由になります。

jQuery tooltip/3

前ページの、IE7のフェードでのバグを修正したツールチップJSです。背景画像収容のDIV要素をラップしただけです。

jQuery tooltip/2

簡単単純なツールチップ(tooltip)、背景画像を使用した「フェードタイプ」です。簡単に作れますので自作した方が使い勝手が良いかも知れません。デザインも自由になります。

jQuery tooltip/1

簡単単純なツールチップ(tooltip)です。簡単に作れますので自作した方が使い勝手が良いかも知れません。デザインも自由になります。


▲[ 目次 ]


jQuery HoverMenuシリーズ記事


jQuery HoverMenu/11

前ページ掲載の HoverMenu 10 は大変わかり難いものです。問題が多すぎたし、バグのあった「IE9」にも対応できるようにHTML構造を変えました。単純な構造での制作をしたかったのですが旨く行きませんでした。新構造のものは解説説明などほとんどありません。(IE6非対応)

jQuery HoverMenu/10

前ページ掲載の jquery.backgroundpos.js 使用の、HoverMenu 9 のサンプル同様「サブメニュー」を加えた構造にして「サブメニュー」を伸縮表示します。多少の不具合があったので改良をしたものです。(IE6非対応)

jQuery HoverMenu/9

前ページ掲載の jquery.backgroundpos.js 使用の、HoverMenu 8 のサンプルに「サブメニュー」を加えた構造にして「サブメニュー」を伸縮表示します。(IE6非対応)

jQuery HoverMenu/8

背景画像ポジション移動用プラグイン jquery.backgroundpos.js を使用して、リスト形式で作成したメニュー要素の「li の背景のポジション移動」させます。jQueryバージョン1-8でも使用できるのが最大の利点だ。(IE6非対応)

jQuery HoverMenu/7

背景画像ポジション移動用プラグイン jquery.backgroundPosition.js を使用して、リスト形式で作成したメニュー要素の「li の背景のポジション移動」させます。但し使用するjQueryバージョン違いでは、IEで動作しないようです。少し改造を試みてみました。(IE6非対応)

jQuery HoverMenu/6

HoverMenu1-5は、変化させるため中間層を挿入していましたが、これは普通にリスト形式で作成したメニュー要素の「li の背景画像を背景のポジション移動」(background-position) で変化させます。(IE6非対応)

jQuery HoverMenu/5

jQueryメソッド hover(over,out) を使用して、メニュー要素背景をフエード等の変化させますが、メニュー要素の幅が一定ではありません。

jQuery HoverMenu/4

jQueryメソッド hover(over,out) を使用して、メニュー要素背景を「背景画像」で変化させます。(IE6非対応)

jQuery HoverMenu/3

jQueryメソッド hover(over,out) を使用して、メニュー要素背景を「縦方向に伸縮」変化させます。

jQuery HoverMenu/2

jQueryメソッド hover(over,out) を使用して、メニュー要素背景を「横方向に伸縮」変化させます。

jQuery HoverMenu/1

前回までは、jQueryメソッド hover(over,out) を使用して画像を変化させるものでした。今回はメニューに応用してみます。メニュー要素背景をフエード変化させます。


▲[ 目次 ]


jQuery hover() アクション シリーズ記事


jQuery hover() アクション/7

jQueryメソッド hover(over,out) を使用して、 画像をスライド(4DOOR)して変化させます。

jQuery hover() アクション/6

jQueryメソッド hover(over,out) を使用して、画像をスライドして変化させます。

jQuery hover() アクション/5

jQueryメソッド hover(over,out) を使用して、画像を拡大して変化させます。画像の大きさが違っていても対応できるように処理するタイプです。

jQuery hover() アクション/4

jQueryメソッド hover(over,out) を使用して、画像を拡大して変化させます。

jQuery hover() アクション/3

jQueryメソッド hover(over,out) を使用して、JSから画像を取り替える操作をします。昔のロールオーバーです。

jQuery hover() アクション/2

jQueryメソッド hover(over,out) を使用して、2枚の画像を重ねクロスフエードで変化させます。

jQuery hover() アクション/1

jQueryメソッド hover(over,out) を使用して色々な画像のロールオーバーなどを表現してみます。


▲[ 目次 ]


jQuery 伸縮するパネル シリーズ記事


jQuery 伸縮するパネル/7

前記の「伸縮するパネル」シリーズ「LightBox」JSを改造し、CSS3形式での角丸陰影処理をしました。CSS3対応のブラウザのみ機能します。なおIE7.8は角丸陰影処理出来ません。(IE6非対応)。

jQuery 伸縮するパネル/6

新形式の「LightBox」の角丸処理を、GIF画像または corner.js、で行う場合の「シミュレーション」です。IE6には対応していません。

jQuery 伸縮するパネル/5

角丸陰影画像を外周に配置し伸縮する「LightBox」のFADEタイプの入ったJSです。前のMOVEタイプに「FADE」が加わった形です。IE6非対応。

jQuery 伸縮するパネル/4

角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮する「LightBox」の「シミュレーション」を行います。

jQuery 伸縮するパネル/3

角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮する「LightBox」を作ってみました。IE6非対応。

jQuery 伸縮するパネル/2

角丸陰影画像を外周に配置した「伸縮するパネル」についての記事です。IE6非対応、新方式の構造ですが動作が軽いのが特徴です。従来拠りのバグなど半減して設定などが楽になります。

jQuery 伸縮するパネル/1

角丸陰影画像を外周に配置した、伸縮するパネルについてです。動作が軽いのが特徴です。


▲[ 目次 ]


jQuery POPS-iBOX シリーズ記事 (ブログ掲載)


jQuery POPS-iBOX の改造

pops-ibox-3iは、テスト的に CSS3 を利用したものに改造して見たものですが、それらを含め改造する方法など少しかきます。

jQuery POPS-iBOX シミュレーション 3

pops-ibox-3c、を改造して、CSS3 でコーナー、陰影処理を行ったテスト「LightBox」の「シミュレーション」を行います。

jQuery POPS-iBOX シミュレーション 2

角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮表示する「LightBox」、pops-ibox-3c の「シミュレーション」を行います。

jQuery pops-ibox用パネルの特性とフエードの対処

角丸陰影画像を外周に配置し伸縮する新しいパネル構造を利用してpops-iboxを制作した。パネルの特性とフエードの対処について調べてみた。

jQuery POPS-iBOX シミュレーション

角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮表示する「LightBox」pops-ibox-3a の「シミュレーション」を行います。


▲[ 目次 ]


jQueryアコーディオンHoverMenuシリーズ記事


jQueryアコーディオンHoverMenu/6

jQueryアコーディオンHoverMenu6、 jQueryアコーディオンMENU6、ホーバーすると「上方に開く形」の MENU です。「画像部分」と「メニュー部分」を構造的に分離したものです。
分離しているため設置位置に汎用性があります。またタイトル背景色を個別に変えることも可能です。マスク用のラップを削除しましたので、ページ部分のリンクに影響がありません。

jQueryアコーディオンHoverMenu/5

jQueryアコーディオンHoverMenu5、 jQueryアコーディオンMENU5、ホーバーすると下方に開く形の MENU です。「画像部分」と「メニュー部分」を構造的に分離したものです。
分離しているため設置位置に汎用性があります。またタイトル背景色を個別に変えることも可能です。マスク用のラップを削除しましたので、ページ部分のリンクに影響がありません。

jQueryアコーディオンHoverMenu/4

jQueryアコーディオンHoverMenu4、 jQueryアコーディオンMENU4、ホーバーすると上方に開く形の MENU です。jQueryアコーディオンHoverMenu1の「画像部分」と「メニュー部分」を構造的に分離したものです。
分離しているため設置位置に汎用性があります。またタイトル背景色を個別に変えることも可能です。

jQueryアコーディオンHoverMenu/3

jQueryアコーディオンHoverMenu3、 jQueryアコーディオンMENU3、アクション形式などは前のものとほぼ同じですが、構造を少し変えてみました。大型の背景画像とともに使用します。反対方向に開くの所「面白い」が、使い道はない。サガシナハレヤ !

jQueryアコーディオンHoverMenu/2

jQueryアコーディオンHoverMenu2、 jQueryアコーディオンMENU 2、ホーバーすると上方に開く形の MENU です。前ページの画像を Fade および Slide でエフェクトするようにしたものです。反対方向に開くのが面白い。

jQueryアコーディオンHoverMenu/1

jQueryアコーディオンHoverMenu1、 jQueryアコーディオンMENU、ホーバーすると上方に開く形の MENU です。大型の背景画像とともに使用します。反対方向に開くのが面白い。。


▲[ 目次 ]


jQueryその他のアコーディオンシリーズ記事


jQueryその他のアコーディオン/3

jQueryその他のアコーディオン3、 通常は記述が簡単ですから、siblings を使用して製作する場合が多いかとおもいます。siblings を使用しない番号指定方式にしたアコーディオンです。利用価値があるかは「不明瞭」ですから当方でも利用は考えていません。

jQueryその他のアコーディオン/2

jQueryその他のアコーディオン2、 コンテンツ内部で使用する画像用アコーディオンである。単なるアコーディオンであって、余り意味のあるものではない。

jQueryその他のアコーディオン/1

jQueryその他のアコーディオン1、 メニューまたはサイドでの使用ではなく、コンテンツ内部で使用する、コンテンツ用アコーディオンである。


▲[ 目次 ]


jQueryアコーディオンシリーズ記事 (一般的なアコーディオン)


jQueryアコーディオン/8

jQueryアコーディオン8、 「ul li」ブロック構成、開閉連動形のAccordion(clickタイプ)を、「横方向に伸ばせる画像」で角丸装飾してみました。横方向に伸縮出来るようにしましたので、横幅の設定が簡単です。

jQueryアコーディオン/7

jQueryアコーディオン7、 「ul li」ブロック構成、開閉連動形のAccordion(clickタイプ)を CSS3 で角丸装飾してみました。CSS3対応のブラウザでご覧ください

jQueryアコーディオン/6

jQueryアコーディオン6、 「ul li」ブロック構成、独立ブロック形式、開閉連動形のAccordion(clickタイプ)をjquery.corner.jsで角丸装飾してみました。CSSが大変面倒なものです。

jQueryアコーディオン/5

jQueryアコーディオン5、 「ul li」ブロック構成、開閉連動形のAccordion(clickタイプ)をjquery.corner.jsで角丸装飾してみました。

jQueryアコーディオン/4

jQueryアコーディオン4、 「dl dt」ブロック構成で作りました。開閉連動形のAccordion(clickタイプ)を画像で装飾してみました。開いているところを閉じてから、指定位置を開く形式です。

jQueryアコーディオン/3

jQueryアコーディオン3、 開閉連動形のAccordion(clickタイプ)を画像で装飾してみました。開いているところを閉じてから、指定位置を開く形式です。

jQueryアコーディオン/2

jQueryアコーディオン2、 開閉連動形のAccordion(clickタイプ)。開いているところを閉じてから、指定位置を開く形式です。

jQueryアコーディオン/1

jQueryアコーディオン1、 Accordion (clickタイプ)。縦形の最も標準的なアコーディオンである。
外形寸法(高さが固定されていない)が設定されていないので縦に伸縮する。ページの構造上、縦に伸びても気にはならない。


▲[ 目次 ]


jQueryバーチカルアコーディオンシリーズ記事


jQueryバーチカルアコーディオン/2

jQueryバーチカルアコーディオン2、 Vertical Accordion (clickタイプ)。横形のものを縦形に書き直しました。但し応用の範囲は限定されます。

jQueryバーチカルアコーディオン/1

jQueryバーチカルアコーディオン1、 Vertical Accordion (hoverタイプ)。横形のものを縦形に書き直しました。但し応用の範囲は限定されます。


▲[ 目次 ]


jQueryホリゾンタルアコーディオンシリーズ記事


jQueryホリゾンタルアコーディオン/5

jQueryホリゾンタルアコーディオン5、 Hoyzontal Accordion (hoverタイプ)を「簡易アルバム」のサムネール表示に応用してみました。設定はほぼJS側で行いCSS記述を簡略化しています。画像などはJS側に登録して行います。

jQueryホリゾンタルアコーディオン/4

jQueryホリゾンタルアコーディオン4、 Hoyzontal Accordion (Menu clickタイプ)大型背景画像専用。今まではhoverタイプでしたが、これはclickタイプになります。設定はほぼJS側で行いCSS記述を簡略化しています。

jQueryホリゾンタルアコーディオン/3

jQueryホリゾンタルアコーディオン3、 Hoyzontal Accordion (Menu hoverタイプ)大型画像専用。前ページの記事「ホリゾンタルアコーディオン1」を大型画像を使用する場合に使い易いようにしました。設定はJS側で行い、CSS記述を簡略化しています。

jQueryホリゾンタルアコーディオン/2

jQueryホリゾンタルアコーディオン2、 Hoyzontal Accordion (Menu hoverタイプ)。前ページの記事「ホリゾンタルアコーディオン1」を背景画像使用にしてみました。主にCSS設定がかわります。

jQueryホリゾンタルアコーディオン/1

jQueryホリゾンタルアコーディオン1、 Hoyzontal Accordion (Menu hoverタイプ)。ありふれたものですがFlash方式のものを、jQuery用に書き直しました。結構応用できるものがあります。


▲[ 目次 ]


jQuery簡易SLIDESHOWシリーズ記事


簡易SLIDESHOW/8

簡易SLIDESHOW-8、「簡易SLIDESHOW-7」を改造し横分割のスライドを多くしたものです。横長の画像に最適です。

簡易SLIDESHOW/7

簡易SLIDESHOW-7、スライド系統のものを多くした、BAR ZIPPER 4DOOR をも含む、多彩な「ページャー付きスライドショー」です。

簡易SLIDESHOW/6

簡易SLIDESHOW-6、SLIDESHOW-5スライド系「ページャー付きスライドショー」にフェードを加えました。ページャーに画像を使用しました。

簡易SLIDESHOW/5

簡易SLIDESHOW-5、スライド系統のものを多くした、BAR 2DOOR 4DOOR をも含む、多彩な「ページャー付きスライドショー」です。

簡易SLIDESHOW/4

簡易SLIDESHOW-4、SLICE-PHOTO-4(pops-slicephoto04.js)を改造してページャー付きスライドショーにしました。

簡易SLIDESHOW/3

簡易SLIDESHOW-3、簡易SLIDESHOW-2を改造してスライスをくわえました。

簡易SLIDESHOW/2

簡易SLIDESHOW-2、色々なエフェクトを持った、ページャー付きスライドショーです。

簡易SLIDESHOW/1

簡易SLIDESHOW-1、色々なエフェクトを持った、簡易ページャー付きスライドショーです。


▲[ 目次 ]


jQuery簡易TRANSITION-PHOTOシリーズ記事


簡易TRANSITION-PHOTO/4

簡易TRANSITION-PHOTO-4、画像に拡大縮小フエードとスライスエフェクトをくわえます。

簡易TRANSITION-PHOTO/3

簡易TRANSITION-PHOTO-3、TRANSITION-PHOTO-2拡大縮小フエードのエフェクトに、簡単なスライドをくわえました。

簡易TRANSITION-PHOTO/2

簡易TRANSITION-PHOTO-2、画像に拡大縮小フエードのエフェクトをくわえます。

簡易TRANSITION-PHOTO/1

簡易TRANSITION-PHOTO-1、画像に色々な、エフェクトをくわえます。


▲[ 目次 ]


jQuery簡易SLICE-PHOTOシリーズ記事


簡易SLICE-PHOTO/7

簡易SLICE-PHOTO-7です、簡易SLICE-PHOTO-6 の、2ドアタイプを削除して、4ドアタイプを加えました。

簡易SLICE-PHOTO/6

簡易スライドタイプです、左右上下にスライドします、ドアタイプもつけました。

簡易SLICE-PHOTO/5

簡易SLICE-PHOTO-5、簡易SLICE-PHOTO-1をベースに、標準分割のほかに、分割変化タイプを加えました。

簡易SLICE-PHOTO/4

簡易SLICE-PHOTO-4、お祭り騒ぎタイプですから、落ち着きの無い方に最適です。

簡易SLICE-PHOTO/3

簡易SLICE-PHOTO-3、簡易SLICE-PHOTO-1をベースにページャー機能をつけてみました。

簡易SLICE-PHOTO/2

簡易SLICE-PHOTO-2、画像をスライスして、一部フェードエフェクトを加えてみました。動作が重いため閲覧には、Google Chrome を推奨します。

簡易SLICE-PHOTO/1

簡易SLICE-PHOTO/1、画像をスライスして、エフェクトをくわえます。


▲[ 目次 ]


そのほかの、「画像エフェクト」シリーズ記事


簡易DOUBLE-SLIDER2

簡易DOUBLE-SLIDER2、簡単な画像ダブルスライドですが、構造の違うタイプです。

簡易DOUBLE-SLIDER

簡易DOUBLE-SLIDER、簡単な画像ダブルスライドです。

簡易ホリゾンタルPHOTO-SLIDER

簡易ホリゾンタルPHOTO-SLIDER、シームレス&エンドレス、簡易スライダーです。

簡易PHOTO-SLIDER

TOPページ用途の、jQueryでつくる、画像簡易PHOTO-SLIDER です。

簡易PHOTO-FADER

TOPページ用途の、jQueryでつくる、画像簡易PHOTO-FADER です。


▲[ 目次 ]



以上、シリーズ記事の案内でした。

 


[ この記事のURL ]


タグ:memo , jquery

 

ブログ記事一覧

年別アーカイブ一覧



[1]