slider.jsは、通常のマウスでのドラッグ操作だけでなく、マウスのクリック・ホイール操作や、キーボードの矢印キー・Home・Endキーにも対応しているスライドバーのスクリプトです。
[JS]キーボードやホイール操作にも対応したスライドバー -slider.js
slider.jsは、通常のマウスでのドラッグ操作だけでなく、マウスのクリック・ホイール操作や、キーボードの矢印キー・Home・Endキーにも対応しているスライドバーのスクリプトです。
軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」:phpspot開発日誌
MooTools Mocha UI Mocha is a MooTools user interface class made with canvas tag graphics. This is an on going exercise to help me become more familiar with both MooTools and the canvas tag. 軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」。 次のような移動＆リサイズ＆クローズ＆最大化可能なウィンドウを簡単に作成できます。 サイト内のデモでは、タイトルと内容を入力することで、動的にウィンドウを作成できることが紹介されています。 フレームワークには、mootools 使用。 かなり軽快に動いてくれ、ページ内で別窓を作るＵＩを作る際にはかなり使えそう。 関連エントリ Prototype.jsベ
階層的でクールなメニューを作るためのJSライブラリ「FastFind Menu」:phpspot開発日誌
FastFind Menu This page demonstrates the ActiveSpotLight FastFind Menu Script. 階層的でクールなメニューを作るためのJSライブラリ「FastFind Menu」。 紹介サイト上、左上の[ Toggle Menu ] でデモが開きます。 メニューをクリックすると、階層的にメニューが開きます。 アニメーションも滑らかでカッコいいです。メニュー先はAjaxでオープンするようです。 Ajax にすることで、深い階層であっても一度に読み込ませることなく利用することが可能です。 こういった形式のメニューの需要もあると思うので、覚えておくとよさそう。 関連エントリ セクシーに動作するスライドメニューバー実装JSライブラリ
[JS]画像を使用しないでグラデーションを表現するスクリプト -gradient
gradientは、画像を使用しないでブロック要素やインライン要素にグラデーションの背景を表示するスクリプトです。 gradient デモページ gradientはjQueryのプラグインで、動作にはjquery.jsとdimensions.jsが必要です。 キャプチャ画像は、gif画像のためモアレがでてグラデーションが汚いですが、実際はきれいなグラデーションで表示されます。 サンプル グラデーションは、始点と終点の色、水平・垂直方向、グラデーションのポジション・開始位置などの指定ができます。
[JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider 1.1
Coda-Slider 1.1は、先日紹介したCoda-Slider 1.0からバージョンアップをした、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Coda-Slider 1.1 Coda-Slider 1.1 デモ Coda-SliderはjQueryのプラグインで、1.1の主な改良点は下記のようになっています。 jQuery 1.2への対応 IE6, 7でタブを早くクリックした場合のバグ スクリプトオフへの対応(<noscript>) YouTubeなどの動画のバグ preloaderの採用 タブと矢印以外にもスライドするリンクを設置可能 参考： スムーズに切り替わるタブ型コンテンツ -Coda-Slider
アニメーションする面白いタブＵＩ実装JSライブラリ「Tab Styled Accordion」:phpspot開発日誌
NYOKIGLITTER - Tab Styled Accordion アニメーションする面白いタブＵＩ実装JSライブラリ「Tab Styled Accordion」。 タブをクリックするとアコーディオン風にアニメーションしながらタブが切り替わります。 クリックすると驚きのアニメーション効果はこちら 訪問者に驚きの体験を与えたいという方は、一度使ってみましょう。
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
MOONGIFT: » JavaScriptによる多彩なグラフライブラリ「LT Diagram Builder」:オープンソースを毎日紹介
Webページ上でグラフを描くというと、各種画像生成ライブラリを利用するだろうか。画像は手軽な反面、ダイナミックな生成ができず面倒な場合がある。 ダイナミックに描画を変更できると言えば、JavaScriptが便利だろう。そのようなニーズではこれを試してみよう。 今回紹介するオープンソース・ソフトウェアはLT Diagram Builder、JavaScriptベースのグラフ生成ライブラリだ。 LT Diagram Builderが対応しているのは棒グラフ、折れ線グラフ、関数グラフ、矢印、円グラフ、ガントチャート等多彩な描画に対応している。 ダイナミックな描画にも対応しており、関数の値を変更すれば、即座にグラフに反映する事ができる。JavaScriptの強みだろう。 また、PHPやASPでのグラフ生成にも対応している。結果的に出力されるのはJavaScriptのようだが、サーバサイドのデータを
edge.js (javascript image mask effect)
Initialisation class "edge" vary the mask by adding imask followed by the maskimage number: Mask image class "imask" - min=0 max=NumberOfLoadedMasks default=0 fallback mask creates soft edges without any external resource image: Fallback class "inbuilt" vary the size of the fallback mask by adding isize followed by the desired size in pixel: Edge size class "isize" - min=0 max=HalfOfImageDimension
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
WEB制作者のための32個のブックマークまとめ（part2）*ホームページを作る人のネタ帳
前回ご紹介した 今押さえておくべきWeb制作に役立つ37個のブックマークまとめ と一緒にあわせて使うとより強力になるかもしれません。 前回の記事のあとにみつけた32個のブックマーク集です。 WEBツール CSS Dock Menu マックのドックのような動きをするインターフェイスタブをあなたのページにつける事が出来るツール。動きが滑らか。 Dynamic Page Flip v2 from shift+control 本をぺらぺらとめくるようなイメージギャラリー。 これはかなり見た目インパクトが強い。 画面中央左の『Download the source files』のところで無料でダウンロードできる。オリジナルのカタログもつくれそう。 ためしに使ってみたけど、RSSパーサーと組み合わせると、ページにRSS受信も出来た。アイデア次第でなんでもいけそうですよ。 10 Free CSS Gra
CSSとJavaScriptで作るサイトメニュー - rytich's diary
探したついでにまとめのまとめ。 知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE でかなり使えそうなhttp://www.hereticanthem.com/webdesign/275/を含め、一通りは紹介されてる。 以下それ以外の。 横型メニュー Flashのような動き javascriptで伸縮するメニューができる - webデザイナーのナナメガキ これもFlashっぽい http://devthought.com/cssjavascript-true-power-fancy-menu/ サンプル8種類 Powerpoint Alternatives For Windows 10, Mac & Linux サブメニュー付 http://www.aplus.co.yu/adxmenu/examples/ シンプル Dynamic Drive
押さえておきたい15のJavaScriptスニペット:phpspot開発日誌
WebCodr.com Blog Archive 15 Javascript Snippets You Can’t Live Without Please Note: We have moved to our new home WebCodr.com - please update your links and bookmarks! 押さえておきたい15のJavaScriptスニペット。 画像読み込み＆フェーディング 動的テーブル カレンダー選択ウィジェット タブバー ドラッグできるWindow ズームできるイメージサムネイル LightBox2 ドラッグ＆ドロップなショッピングカート ドラッグ＆ドロップなソート可能リスト JavaScriptのロギング＆デバッギング フォントリサイズの検出 地図上にポインタとテキストを置く フォトアルバム＆スライドショー スライドダウン＆アップアニメーシ
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
IE５でアルファチャンネルPNGを使うための一番簡単なライブラリ あるいはIEの失われたテクノロジに驚異せよ
http://d.hatena.ne.jp/amachang/20070206/1170715555 http://labs.unoh.net/2007/02/ie6_png_fix.html http://web.kankodo.net/2007/02/01-233315.html http://phpspot.org/blog/archives/2007/02/iepngjavascript.html なんかはやってるみたいなんで作ってみました！ 一番設定が簡単だと思う。IE5IE5.5以上なら多分動く*1。 あとIEすごいよ！というお話 やりかた 1.次の内容を alpha.htc という名前で適当なところに置く <SCRIPT LANGUAGE="JScript"> (function(){ runtimeStyle.filter += 'progid:DXImageTransfo
古いブラウザで透過PNGを表示させるJavascriptの比較検証
取り上げるのは下の3つ。便宜的に上からapng、alphafilter、ie6pngとする。 IT戦記 - 僕も半透明 png を使うためのライブラリ作った！ アルファ画像を扱うalphafilter.jsライブラリ-とあるWEBクリエイターのblog ウノウラボ Unoh Labs: IE6でアルファチャンネルを含むPNGを表示する apng特長外部ライブラリ不要実行に遅延なし萌えポイントコードの文体がいかにもプロっぽいグローバル領域を侵さない"if lte IE6とかもできるよ"って言ってるところ好みがわかれるところ対象PNGの直後にscriptロードするだけで使える / 何度もロードしなきゃいけないのが嫌びみょうなところimgにwidthとheightを指定しなきゃいけない（詳細不明）簡単カスタマイズelmScript.src.replaceのとこをいじって好きなファイル名（/bla
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
13 Awesome Javascript CSS Menus | The Jotform Blog
» 12 Javascript Image Galleries
http://youmos.com/news/parallax_backgrounds.html
http://youmos.com/reference/set_element_class.html