画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
ColorBox | 設置サンプル
1枚の画像をポップアップ 複数枚の画像をグループ化してギャラリー表示 複数枚の画像をグループ化してギャラリー表示 複数枚の画像をグループ化してギャラリー表示 外部ファイルをAjaxで取得して表示 ページ内のコンテンツをインライン表示 Flashムービーや動画を埋め込み 指定したURLのページをインラインフレーム内に表示 ハニートースト@アボガドダイニング Platinum Lounge アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran
お手軽スワップイメージ用[jswap.js]
お手軽スワップイメージプラグイン「jswap.js」 DreamWeaverでスワップイメージをつくるとコードが分かりにくいし、もっと簡単にしたい。 そんなときのためにjqueryプラグインです。 クラス指定だけでできる簡単さを目指しました。 使い方 ヘッダにjquery.jsとjswap.jsを読み込んでください。 <script type="text/javascript" src="common/js/jquery.js"></script> <script type="text/javascript" src="common/js/jswap.js"></script> また、jswap.js内に設定可能箇所がありますので確認します。 box : '.jswap', //全体をくくるdivのクラス l: '.jswap_l', //大きい画像が入るdivのクラス s: '.js
テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」:phpspot開発日誌
テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」 2010年03月25日- jQuery Plugin: Give Your Characters a NobleCount The Product Guy テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」。 今、テキストエリア内に何文字はいっているのか？というのは、文字数制限をしているフォームにとっては重要なユーザビリティになりますね。 送信ボタンを押した後に、文字数オーバーです、というのは不親切ですしサーバに無駄なリクエストが増えることになります。 Twitter では残り文字数を表示していますが、これをjQueryで１行で実装してしまえるのがこのプラグイン。 $(element).NobleCount('#ta
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
jQueryによるアニメーションエフェクトの基本 (3/5)
スライドアニメーションで表示／非表示を切り換えるslideDown()／slideUp() slideDown()／slideUp()は、セレクターで指定した要素の表示／非表示をスライドアニメーション付きで切り換える命令です。slideDown()は非表示の要素の高さを0から本来の高さに近づけながら表示し、slideUp()は表示状態の要素の高さを少しずつ0に近づけながら非表示にします。 $(セレクター).slideDown(スピード,コールバック関数); $(セレクター).slideUp(スピード,コールバック関数); サンプル06は、slideDown()／slidUp()を使って、「開閉パネル」(Collapsible-Panel)と呼ばれるUI部品を作成したものです。dt要素がクリックされると、css()を使ってdd要素のdisplayプロパティを調べ、displayプロパティの値
Ajaxによるタブメニュー : jQuery idTabs
[PROCESS3][LEVEL3]このサイトの上部の黒板風ボードのタブの切り替えにArchivaさんのJavaScriptをずっと使わせていただいていたのですが、このところIEにおいて挙動不審が見うけられた（タブを切り替えるたびにページ内リンク位置に自動スクロールしてしまう）のでjQuery idTabsに変更しました。 悩ましきIE jQuery系のJavaScriptを選んだのは、 jQuery系のJavaScriptを設置してからおかしくなった。 以前もjQuery系とPrototype系とでかみ合わなかった。 などから、どうもIEではjQuery系のJavaScriptを使う場合はjQuery系一本でいかないと具合が悪いのではないかと思われたからです。実際、jQuery系一本にしてみたところ挙動不審が収まったので全くの的外れではないように思われます。 jQueryが悪いのか、それ
Coda-Slider 1.1#5
3 Considerations For Your Website Slider + where to find the original Coda-Slider plugin Welcome to my concise website slider guide. If you want to know: The pros and cons of using a slider on your website If your website already has built-in slider capability How to “roll your own” slider What happened to the original jQuery Coda Slider plugin Then you’ve come to the right place. Let’s get starte
ページ移動の必要が無くなるページング系jQueryプラグイン・Pagination Plugin - かちびと.net
ページングのユーザビリティを あげたいけど、オートタイプは 嫌だ、と言う方にオススメの jQueryプラグインがありました。 選択肢の一つに如何でしょう。 タブのような感覚でページ移動が出来ます。ページ数の多いサイトはユーザビリティとしても取り入れたいですね。
jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
Ywcafe.net
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Credit Card Application Health Insurance 10 Best Mutual Funds Accident Lawyers song lyrics Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy
コンテンツにエフェクトを掛けるjQueryプラグイン10個 - かちびと.net
個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an
jqueryでウェブサイトをリッチにするプラグインまとめ « vanillate
jqueryのプラグインのまとめです。jqueryはjavascriptベースのライブラリのようなもの。画像やメニューに動的な操作を与えたりすることが可能です。また、HTMLソースも複雑になりにくく、デザインをCSSで操作可能なものが多く、ウェブデザインをより魅力的にすることができます。 フェードしながらスライドするjQueryプラグイン デモ jQuery ListMenu Plugin デモ 大量のアイテムもすっきりとリストにできます。 Sliding login panel with jQuery デモ ログインフォームもおしゃれに。常に表示しておく必要はないですよね。アニメーション付きでぶらさがってくるこんなプラグインはいかがですか。 create a better jQuery stylesheet switcher デモ スタイルシートをjqueryで切り替えるプ
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://firespeed.org/diary2/read/read.php?diary=kenz-1309
Loading...%25EF%25BC%258BslideUp()%25E3%2581%25AE%25E4%25BD%25BF%25E7%2594%25A8%25E4%25BE%258B)
エフェクト操作：スライディング：slideDown()+slideUp()の使用例 | jQuery
IDEA * IDEA
IDEA * IDEA