jQueryでフィルタ（フィルタリング）機能をシンプルに実装する方法｜BLACKFLAG
写真の一覧ページなど、Webページ上でたくさん並べられたコンテンツ要素に対して カテゴリ分けした括りなどで、絞り込んだ状態で表示するフィルタ機能。 ページ上に表示する要素が数多くある場合に有効な機能になったりしますが そんなフィルタ機能をjQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の上部にあるカテゴリリンクをクリックすると そのカテゴリの種類で絞り込まれた状態で画像が表示されます。 フィルタ用のリンクをクリックすることで サイズの縮小とフェードのアニメーションが付いた形で 画像がフィルタリングされます。 このフィルター機能の全体構成について、 まずはHTMLから。 ◆HTML <div id="filter"> <a href="javascript:void(0);" class="allitem">ALL</a>
jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法｜BLACKFLAG
先日、とある案件で必要になり、jQueryを使って作成した、 コンテンツ要素を自動でスライドさせるサムネイル要素付きのスライダーが 今後も他でいろいろ使いまわせそうだったので、ここでも軽くスクリプトを紹介してみます。 まずは動作のサンプルから。 指定した間隔（時間）で一つずつ画像（コンテンツ要素）がスライドします。 スライド箇所の下にサムネイルを配置し、マウスオーバーすることで 該当箇所へ任意にスライドさせることができます。 サムネイル部分にマウスオーバーしている間は、 メイン部分の自動スライドの動作は停止します。 この動作の全体構成について、 HTMLから。 ◆HTML <div id="slider_main"> <ul> <li><img src="img/photo01.jpg" width="400" height="300" alt="" /></li> <li><img sr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
