jQueryで時間をカウントダウンするJavaScript「jCountr」
twitter facebook hatena google pocket ティザーサイトなどで、あと何秒でオープンみたいな表示があります。 JqueryプラグインjCountrを使用すると似たようなカウントダウンが可能になります。 sponsors 使用方法 jCountrからjquery.jCountr.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.jCountr.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#id名").counter({ hou
jQueryでマウスオーバーを印象的にする：jQuery Animated Menu
twitter facebook hatena google pocket マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。 jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にする小ネタです。 via：jQuery Animated Menu sponsors 使用方法 今回はサンプルとしてメニュー的なhtmlを記述してみます。 <ul id="menu"> <li class="home"><a href="#">home</a></li> </ul> CSSは以下とします。 ul#menu {height:81px;margin:0;padding:0;} ul#menu li a {display:block;height:81px;width:159px;text-inde
角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」
twitter facebook hatena google pocket 最近は角丸やグラデーションが多用されていますが作るのはなかなかの手間です。 JavaScriptのRound Corners jQuery Pluginを使用すると、そんな手間を省くことが出来ます。 sponsors 使用方法 Round Corners jQuery PluginからroundCorners.jQuery.jsをjQueryからjqueey.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="roundCorners.jQuery.js"></script> <script> $(document).ready(functio
驚きの画像切り替え！jQueryプラグイン「Jquery.ImageSwitch」
twitter facebook hatena google pocket 画像の切り替えでユーザーに驚かせることができそうです。 jQueryプラグインのJquery.ImageSwitchはフェードインなどのよくあるパターンだけではなく、ダブルドアと名づけられた切り替え方も可能です。 sponsors 使用方法 Jquery.ImageSwitchからGroject.ImageSwitch.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="Groject.ImageSwitch.js"></script> <script> $(document).ready(function(
3ステップでツールチップを作成「jQuery Simple Tooltip」
twitter facebook hatena google pocket ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。 3ステップでこのツールチップを導入できるjQuery Simple Tooltipを紹介します。 sponsors 使用方法 【STEP 1】 jQuery Simple Tooltipからファイルをダウンロードします。 【STEP 2】 以下を記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.simpletooltip-min.js"></script> <script> $(function(){
関連性をビジュアライズするJavaScript「jConnecter」
twitter facebook hatena google pocket WEB上で「AとBは関連性があるがCとはない」と表現することがあった場合、画像編集ソフトを使用するしかありませんでした。 jQueryプラグインのjConnecterを利用すると、簡単に表現することができます。 sponsors 使用方法 jConnecterからjConnecter.jsを、Canvas Text FunctionsからCanvasText.jsを、そしてjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="CanvasText.js"></script> <script type="text/jav
jQueryでタブメニューを作る（プラグインなし）
twitter facebook hatena google pocket JavaScriptライブラリのjQueryには数多くのプラグインがあり、それを利用することで簡単にリッチなコンテンツを作成できます。 今回はその流れに逆らい、プラグインなしでタブメニューを作成してみたいと思います。 via：Tabbed Structure sponsors 使用方法 まずは、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script> $(function(){ $("a.tab").click(function () { //class="tab"のaタグがクリックされたとき $(".active").removeClass("active"); //cla
画像を様々なエフェクトでフローティングさせるJavaScript「FLOATING IMAGES」
twitter facebook hatena google pocket 画像ギャラリーの見せ方のひとつにこんな手法があってもよいかもしれません。 jQueryプラグインのFLOATING IMAGESは画像を次々にフローティングさせていきます。 sponsors 使用方法 FLOATING IMAGESからファイル一式をダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.floatingimages.js"></script> <script type="text/javascript" src="jquery.ui.all.js"></script> <script type="text/javascrip
要素を回転表示させるJavaScript「jQuery Carousel」
twitter facebook hatena google pocket amazonなどでは、書籍を回転表示させ一覧性と省スペースを兼ね備えています。 jQuery Carouselを使用することで、似たよう表示が可能です。 sponsors 使用方法 jQuery Carouselからjquery.carousel.jsを、jQueryからjquery.jsをjQuery Easing Pluginからjquery.easing.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.carousel.js"></script> <script type="text/javascript" src="jq
ナンバリングされた脚注を簡単に作成できるJavaScript「jQuery Footnotes」
twitter facebook hatena google pocket ページが長くなるのを避けるため、また引用文典を文末に記載するために脚注が使用されます。 1つずつ記述してリンクするのは面倒だし、ナンバリングしていたら追記するたびに修正しなければいけません。 jQuery Footnotesでは、そんな面倒を一気に省いてくれます。 sponsors 使用方法 jQuery Footnotesから、jquery.footnotes.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.footnotes.js"></script> <script language=
画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」
twitter facebook hatena google pocket 画像ギャラリーを作る際にLightBoxを使用する人は多いでしょう。 しかし飽き飽きしている人も多いのも確かです。 たまにはjQuery Smooth Div Scrollのように左右にスクロールさせるのはいかがでしょか？ sponsors 使用方法 jQuery Smooth Div Scrollからjquery.smoothDivScroll-0.6.jsや画像、CSSファイルを、jQueryからjquery.jsをダウロードしましょう。 またjquery.scrollToからjquery.scrollTo.jsをダウロードします。 <link rel="stylesheet" type="text/css" href="smoothDivScroll.css" /> <script type="text/ja
JavaScriptライブラリ「mootools」でテキストにエフェクトをかける
twitter facebook hatena google pocket Mootools Function Chainingにて面白い表現が紹介されていました。 JavaScriptライブラリ「mootools」を使用し、テキストにエフェクトをかける方法です。 sponsors 使用方法 mootoolsからmootools.jsをダウロードします。 <script src="mootools-1.2.1.js" type="text/javascript"></script> <script type="text/javascript"> window.addEvent('domready', function(){ var fnChain = new Chain(); var move = $$('id名'); //エフェクトをかけたい対象のid名 move.each(functi
背景画像にトランジション効果をつけられるJavaScript「BGTransition」
twitter facebook hatena google pocket 背景画像にも何らかの効果をつけられると、面白い表現が可能になりそうです。 BGTransitionは、そんな時手軽に導入が可能です。 sponsors 使用方法 BGTransitionからjquery.BgImageTransition.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.BgImageTransition.js"></script> <script language="JavaScript" type="text/javascript"> $( function(){ va
JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」
スクロールさせるJavaScriptは多いですが、simplyScrollほど簡単なものは、あまりないでしょう。 JvaScriptライブラリ「jQuery」のプラグインです。 sponsors 使用方法 simplyScrollから、jquery.simplyscroll.js、jquery.simplyscroll.cssをjQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" href="jquery.simplyscroll.css" media="all" type="text/css"> <script src="jquery-1.3.js" type="text/javascript"></script> <script src="jquery.simplyscroll.js" type="text/javascript"></
画像ギャラリーにマスクをかけるJavaScript「(mb)MaskedGallery」
twitter facebook hatena google pocket 画像ギャラリーに多く使われるLightBoxは、開かれたとたんに閉じてしまうユーザーが結構いるようです。 今回紹介するjQueryプラグインの(mb)MaskedGalleryは画像ギャラリーの上に透過PNGでマスクをつけられ、印象的な画像の見せ方が可能です。 sponsors 使用方法 (mb)MaskedGalleryからファイル一式をダウロードします。 <script src="jquery-1.3.js" type="text/javascript"></script> <script src="mbMaskedGallery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#id名"
JavaScriptライブラリ「jQuery」関連サイト34 : skuare.net
twitter facebook hatena google pocket 米大統領選でクリントン氏と壮絶な攻防を繰り広げるオバマ氏のサイトでも使用されるなど、巷で大人気のjQuery。 今回はjQueryの関連サイトを紹介します。 追記： 2008/2/8 2サイト 2008/5/29 2サイト 2008/6/25 1サイト 2008/7/9 5サイト（jQuery UI系・Cheet Sheetを集めました） sponsors Reference ・jQuery リファレンス：v1.0.x、1.2.x ・jQuery 1.2 ドキュメント日本語訳 ・jQuery 開発者向けメモ：v1.1.x ・jQuery日本語リファレンス：v1.2.6 HowTo / Review ・jquery.jsを読み解く（追記：2008/2/8） ・jQueryの魔法 ・ニュータイプなJSライブラリjQue
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
skuare.net - JavaScript / Movable Type / etc.