エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」:phpspot開発日誌
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 2011年02月10日- jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に実装できてしまいます。 実際のコードは次のようにとてもシンプル。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="//www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /><
[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff
一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。 下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div> </div> JavaScript 「jquery.js」と「jquery.jshowoff.min.js」を外部ファイルとし、下記のスクリプトを記述します。 セレクタ（#features）は、自分の環境にあわせて変更してください。 $(document).re
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
