BOMBERMAN JAVASCRIPT GAME JavaScriptで作られたボンバーマン。 キャラクターはボンバーマンとは違うのが残念ですが、ゲームのルールはボンバーマンです。 スペースキーで爆弾を置き、十字キーで移動します。 これは凄いの一言ですね。 関連エントリ JavaScriptでマリオカート JavaScriptマリオ JavaScriptで書かれたテトリスゲーム JavaScriptで出来たシューティングゲーム「Spacius!」
BOMBERMAN JAVASCRIPT GAME JavaScriptで作られたボンバーマン。 キャラクターはボンバーマンとは違うのが残念ですが、ゲームのルールはボンバーマンです。 スペースキーで爆弾を置き、十字キーで移動します。 これは凄いの一言ですね。 関連エントリ JavaScriptでマリオカート JavaScriptマリオ JavaScriptで書かれたテトリスゲーム JavaScriptで出来たシューティングゲーム「Spacius!」
Rainbow for Firebug :: Firefox Add-ons FireBugのJavaScriptをハイライト表示する拡張「Rainbow」 次のように、FireBugの色分けをしてくれる。 プレーンテキストで読みづらいなぁ、と思っていましたが、こういうエクステンションがあったんですね。 関連エントリ PHPのログをFirebugのコンソールへ出力する例 IEでのデバッグ/動作確認に便利なソフトいろいろ Firebug1.1betaバージョンが公開
NETTUTS - Create a Simple, Powerful Product Highlighter with MooTools 製品を効果的にPRするためのPRページを作成するチュートリアル まず、デモを見てみましょう。アイコンにカーソルを合わせると、吹き出しがクールに切り替わります。 JavaScript、マークアップ、CSSが公開されており、カスタマイズで簡単に調整できます。 ソースがダウンロードできますので、遊んでみましょう。商品のPRページを作っていた人は活用してみるのもよいかも。 関連エントリ Prototype.jsとScript.aculo.usで作るクールなアコーディオンUI jQueryでクールにアニメーションするメニューを実装するチュートリアル
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists チェックボックス、ラジオボックスをオシャレに表示するJS。 次のようなチェックボックス、ラジオボックスにスタイルできるJSです。 <input type="checkbox" class="styled" /> のように、class="styled" で自動スタイルされます。 CSSを変更でデザイン変更可能です。 関連エントリ CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil... 次の記事 ≫:インターネット越しにWiiリモコンを操作できる「Wiimote-over-HTTP」 Dynamic Drive DHTML Scripts- Simple Tree Menu This is a unobtrusive Tree Menu script that turns any ordinary list (UL element) into a collapsible tree! JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」。 次のようなHTMLがあったとすると、 <ul id="treemenu2" class="treeview"> <li>Item 1</li> <li>Folder 1 <ul> <li>Su
mooVRotatingMenu menu tournant sur lui-me gre ・mootools et au whisky クールに回転するJavaScriptメニュー「mooVRotatingMenu.js」 マウスカーソルを合わせるとクルクル回転するメニューが作れます。 HTML的には下記のようになるみたい。 <div id="HorizMenu"> <a href="#" class="mooRotate rotateHome rotateSound"><span>Home</span></a> <a href="#" class="mooRotate rotateMoo rotateSound"><span>Mootools</span></a> <a href="#" class="mooRotate rotateWork rotateSound"><span>Wo
jFlow 1.2 - The Ultra-lightweight Fluid Content Slider for jQuery | Keansphere jFlow is a widget to make your content slides. タブ式のスライドウィジェットを簡単作成できるjS「jFlow」 単なるタブUIではなく、ページの切り替えにスライドアニメーション機能を加えたというもの。 デモはかっこうわるいプレーンな感じですが、CSSでデザインすれば使えそうです。 利用にはjQueryが必要。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」 jQueryでクールにアニメーションするメニューを実装するチュートリアル
shiftzoom.js (zoom and pan functionality) shiftzoom.js 1.0 allows you to add zoom and pan functionality to oversized images on your webpages.画像にGoogleMapみたいにズームできる機能をつけるJS「shiftzoom.js」 大きい画像をズームできるようにして詳細を見れるようにする場合に使えます。 画像左上の+、−アイコンでズームします。 拡大時には右下に全体が現れて、どの部分を拡大しているかがわかります。 色々とアイデア次第で面白いことが出来そうですね。
textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました。textareaのサイズを入力にあわせて調整するJavaScriptサンプル。 rows=1にして、1行のtextareaを使っているサイトを見かけたりしますが、とても使いづらくなってしまいます。 何を入力したのか、上の方を見返すのは小さいスクロールをクリックしないといけません。 とはいえ、スペースはあんまりとりたくない、というケースもあります。 そんなケースに使えます。 こうした形であれば、省スペースかつ、全文を見ながら入力できますね。
本文と追記の表示を切り替えるカスタマイズです。 ご要望を頂きましたので、まずは Movable Type の「追記文章の折りたたみ Web2.0」をアレンジしたものをご紹介します。 1.特徴 JavaScript エフェクトライブラリ script.aculo.us(スクリプタキュラス)を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示し、本文を非表示にします。 JavaScript が無効の場合はブログ記事アーカイブにジャンプします。 ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。 2.サンプル 本文と追記を切り替えるサンプル 3.script.aculo.us のインストール script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。 次のページで「current
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Kwicks スムーズに伸び縮み。 Horizontal Accordion 水平方向のアコーディオン。 Accordion Con
JavaScript Color Fading Script - Web Development Blog This lightweight JavaScript allows for easy color transitions.JavaScriptでクールにカラーフェードアニメーションを実現。 divの要素なんかを、灰色から緑にアニメーションしながら変化させるライブラリが公開されてます。 colorFade('divid','background','ece7b4','f9bcbc',25,30) のように呼び出せばOKみたい。 背景色(background-color )だけでなく、フォント色(color)や、線の色(border-color)を変化させることも出来るみたい サンプルが多数のデモページはこちら 単に色を変えるよりもインパクトがあって、分かりやすいUIを実装するのに役立
jContext 1.0 - The ultra-lightweight right click context menu for jQuery | Keansphere 右クリックメニュー等コンテキストメニューをカンタン作成JS「jContext」。 次のような独自右クリックメニューをカンタンに実装できるようです。 初期化は以下のようにJSでシンプルに。 $(obj).showMenu({ opacity:0.8, query: "#myMenu2", zindex: 2000 }); マークアップも次のように直にHTMLが記述できて便利。 <div id="myMenu2"> <ul> <li><a href="#">Create New Class</a></li> <li><a href="#">Delete Class</a></li> <li><a href="#">Get a
アニメーションするドロップダウンメニュー作成JS「Sliding JavaScript Dropdown Menu」 2008年04月30日- Sliding JavaScript Dropdown Menu - Web Development Blog This lightweight drop down menu script (~1.8kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc.アニメーションするドロップダウンメニュー作成JS「Sliding JavaScript Dropdown Menu」 デモページはこちら メニューの中身は単なるul li
# Internet Explorer不可 OZONE Asylumというフォーラムで出された今月のお題「20行のJavascriptでできるだけ多くのエフェクトを同じスクリーンに出す」に対して出てきたすごい答がこれ。 ソースを見ると、たしかに有効な行は20行しかない。 Opera9.5とFirefox3(どっちもまだベータ)で作者の意図どおり動くとのこと。Firefox2やOpera9でも動き自体は見えるが、Firefox2では光る効果が見えなかったり。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘いただければ幸いです。最新の状況を調べて新しい記事を書
リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。 jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。 sponsors 使用方法 jquery.biggerlinkからjquery.biggerlink.jsを、jQueryからjquery.js(v1.2.1)をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.biggerlink.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#id名 div')
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く