Windows7のような透過ウィンドウを実現するjQueryプラグイン – creamu
Windows7のようにウィンドウを透過させたい。 そんなときに使えそうなのが、『AeroWindow』。Windows7のような透過ウィンドウを実現するjQueryプラグインです。 divを透過させて、重なったときに後ろが透けて見せることができますね。ダブルクリックすると、びよーんと拡大したり、右下をドラッグするとリサイズすることができます。 デモは以下から。 オンラインデモ 動きが気持ちいいので、一度見てみてください。 AeroWindow gihyoさんでの連載が始まりました。最近のかっこいいUIについて考えたり、作り方を紹介したりしていくので、よろしければご覧ください。 第1回 使いやすいメニューはどう作る？ ?水平メニュー あと代官山で物件を見てきました。めちゃくちゃかっこいいんだけど、うーんもうちょい探そうかな。
画像のキャプションを画像から飛び出るように表示するJavaScript「jQuery Drop Captions Plugin」
twitter facebook hatena google pocket 画像にキャプションを付けることでユーザーに配慮することが可能です。 JavaScriptライブラリのjQueryプラグインのjQuery Drop Captions Pluginを使用すると、画像から飛び出すようにキャプションを表示できます。 sponsors 使用方法 jQuery Drop Captions Pluginからファイルをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.dropcaptions.js"></script> <script type="text/javascript" src="jquery.easin
ソフトウェアキーボードを実装するjQueryプラグイン – creamu
フォームのinputやtextarea要素にキーボード機能をつけたい。 そんなときにおすすめなのが、『jQuery Keypad』。ソフトウェアキーボードを実装するjQueryプラグインです。 ↑の例は、inputにフォーカスすると、キーボードが現れるタイプです。キーボードには、「閉じる」「クリア」「一文字削除」機能がついていて、「View」ボタンを押すと、入力した値を確認できますね。 ライセンスはGPL and MITになっているので、自由に使えそうです。 一度見てみてください。 jQuery Keypad LADでいろいろと購入。パーカとボーダーT、ジャケット、ニット帽など。全部かなり気に入りました。09 A/WのBLACK PAINTINGのものが30%OFF〜になっていたので、いいのが揃っていましたね。 パーカはほしかったやつだからめちゃうれしい。
ページの真横からスライドで表示されるサブページを実現する「jQuery pageSlide」
軽量なjavascriptライブラリjQuery、かなり高機能で、様々な表現ができますが、今回紹介するのはjQueryを利用して、ページの真横からスライドで表示されるサブページを実現する「jQuery pageSlide」です。 上記のようにメインコンテンツエリアを、ヨコにスライドして、サブページが表示されます。 詳しくは以下 印象的な見せ方なので、ユーザーに特に残るような見せ方をしたいときに有効だと思います。使いどころは難しいかもしれませんが、はまったときには非常に有効的な見せ方だと思います。 実装方法は非常に簡単で、JQueryを読み込んで、簡単なコードを追加するだけです。出現するページのワイド幅はjavascript上で変更する事ができます。対応しているブラウザはIE7, FireFox 2, Safari 2以上という事で、IE6などの旧世代のブラウザは非対応とのことです。 詳しい
ページ内に雪を降らせられるjQueryプラグイン「jSnow」:phpspot開発日誌
ページ内に雪を降らせられるjQueryプラグイン「jSnow」。 好きな文字をページ内に雪を降らせたような感じで浮遊させることができます。 デモページを見てみましょう 使い方は簡単で、flakeCode に配列を指定すると文字が指定でき、flakeColor 指定で色を指定できます。 $().jSnow({flakes:30,flakeCode:["♠","♣"],flakeColor:["#f00","#00f"]}); ちょっとしたドッキリエフェクトとして覚えておくと使えるかもしれませんね。 以下のエントリを参照してください。 jSnow, a jQuery plugin for creating falling snow effect on your website | DuMmWiaM.com
製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」:phpspot開発日誌
製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」。 次のような、製品の紹介なんかでどこかで見たようなUIパーツを簡単に実装できるみたいです。 実装方法 最初はちょっと難しいような気もするのですが、実はかなり簡単で次のように<div>以下に2つのulを置いておきます <div id="feature_list"> <ul id="tabs"> <li> <a href="javascript:;"> <img src="services.png" /> <h3>Services</h3> <span>Lorem ipsum dolor sit amet consect</span> </a> </li> <li> <a href="javascript:;"> <img src="programming.png" /> <h3>Programming<
Tripwire Magazine | Handpicked goodies for entrepreneurs, developers and web designers
The quality and availability of WordPress e-commerce themes makes WordPress a serious choice as an online shop platform. In fact, WordPress has moved rapidly from being mainly a blogging platform and is now one of the top CMS systems for traditional websites. Lately,... Welcome to our Website Awards for best free WordPress themes. We are hosting this award to showcase the best websites to visit wh
ウィンドウサイズに合わせて要素をきれいに配置するJavaScript「Browser size aware content scaling」
twitter facebook hatena google pocket Googleの画像検索はウィンドウサイズによって表示件数を変えているのをご存知でしょうか？ 割り切れない個数の場合、余らせるのではなくあえて隠してしまうそのこだわり、あなたも追求しませんか。 jQueryを使用して同じ方法を実現する「Browser size aware content scaling like Google images」です。 sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 また要素は今回画像として以下のようにマークアップされているとします。 <div id="content"> <amp-img src="画像パス1" /> <amp-img src="画像パス2" /> <amp-img src="画像パス3" /> <!-- 以下画像分 --> </d
透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記（09/07/24） 若干修正し、2.1にバージョンアップしました。 （今までのでも問題なく動作します。） ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ
画像を簡単に回転できるjQueryプラグイン「Wilq32.RotateImage」:phpspot開発日誌
wilq32 - jQuery plugin: Wilq32.RotateImage 画像を簡単に回転できるjQueryプラグイン「Wilq32.RotateImage」。 このプラグインを使えば、画像を簡単に回転させることができます。 使い方も非常に簡単で、次のように rotate メソッドに -25 といった角度を渡すだけとなっています。 $('#image').rotate(-25); いちいち画像編集ソフトで回転させなくていい上に、アニメーションなんかも出来るので覚えておいて損はなさそうです。 関連エントリ ユニークで使えそうなjQueryプラグイン10個 便利なjQueryプラグインいろいろ コンピュータに指定フォントが入ってるかチェックできるjQueryプラグイン「jquery-fontavailable」
空港の発着情報板みたいな表現をするJavaScript「Airport」
twitter facebook hatena google pocket 空港で発着の情報をガラガラと切り替えるものがあるかと思いますが、それをJavaScriptで実現します。 via:Airport - Information board text effect jQuery plugin sponsors 使用方法 Airport - Information board text effect jQuery pluginからjquery.airport-1.1.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.airport-1.1.js"></script>
簡単にFAQを作れるJavaScript「jQuery Simple FAQ」｜skuare.net
twitter facebook hatena google pocket サイトにはFAQページは必須となりつつあります。 検索機能もつけたFAQをjQuery Simple FAQで簡単に作りましょう。 sponsors 使用方法 jQuery Simple FAQからファイル一式をダウンロードします。 またjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.quicksilver.js"></script> <script type="text/javascript" src="jquery.simpleFAQ-0.1.js"></script> <link rel="
div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
twitter facebook hatena google pocket ページのレイアウト幅をがっちりと決めると、ユーザーに不便させる可能性があります。 jQueryプラグインのIngeny Splitterを使用するとドラッグでページレイアウトを自由にユーザーが調整できるようになります。 sponsors 使用方法 Ingeny Splitterからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.ingeny.splitter.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#
jQuery UI: Radiobutton- und Checkbox-Replacement
$('#toggle-all').click(function(){ $('#example input[type=checkbox]').checkBox('toggle'); return false; }); $('#check-all').click(function(){ $('#example input[type=checkbox]').checkBox('changeCheckStatus', true); return false; }); $('#uncheck-all').click(function(){ $('#example input[type=checkbox]').checkBox('changeCheckStatus', false); return false; });
入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
twitter facebook hatena google pocket inputなどフォームのフィールドにうっすら文字を表示させておくと、ユーザーに入力を促すことが可能です。 JavaScriptライブラリのjQueryプラグイン「JQUERY.FIELDTAG.JS」を使用することで簡単に導入可能です。 sponsors 使用方法 JQUERY.FIELDTAG.JSからjquery.fieldtag.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.fieldtag.js"></script> <script type="text/javascript">
Simple CSS shiny progress bar technique - Ben Ogle's blog. Yeah!
I’ve recently come up with a simple way to make a decent looking, css colorable progress bar/meter out of a couple divs and an image. This is what mine looks like: Basically, you have three divs: a container for the grey, non ‘populated’ section, a div for the colored value, and a div for the text. Both the container and the value div have your image as a background. This image uses mad awesome pn
iPhoneライクにスクロールさせるJavaScript「OverScroll」
twitter facebook hatena google pocket iPhoneのスムーズなスクロールをJavaScriptライブラリ「jQuery」で実現しました。 via：OverScroll sponsors 使用方法 OverScrollからjquery.overscroll.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.overscroll.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#id名").overscroll(); });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-694.html
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト
IDEA * IDEA
