ツールチップやラインにシャドウをつけるなどカスタマイズが豊富な、グラフやチャートを描画する高性能なスクリプト「jqPlot」を紹介します。 <textarea name="code" class="js" cols="60" rows="5"> line1 = [['23-May-08',578.55],['20-Jun-08',566.5],['25-Jul-08',480.88],['22-Aug-08',509.84]]; line1.push(['26-Sep-08',454.13],['24-Oct-08',379.75],['21-Nov-08',303],['26-Dec-08',308.56]); line1.push(['23-Jan-09',299.14],['20-Feb-09',346.51],['20-Mar-09',325.99],['24-Apr-09',38

jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-

Check out Cycle2, the latest in the Cycle line of slideshows. Overview The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. How it Works The plugin provides a method called cycle which is

それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね！ それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像

最近よく見かける「ページTOP」のスクロールをjQueryでは簡単に実装できます。 Javascriptソース $(function(){ $("a[href^=#]").click(function(){ var Hash = $(this.hash); var HashOffset = $(Hash).offset().top; $("html,body").animate({ scrollTop: HashOffset }, 1000); return false; }); }); Javascriptソースの解説 2行目:$("a[href^=#]").click aタグのクリック設定をしています。 $("a[href^=#]")と設定することで、hrefの最初に「#」があるaタグのみに反応するようにしています。 3行目:var Hash = $(this.hash); クリックし

画像でのナビゲーションをフェードで切り替えるのに以前はプラグインとか使っていたけど、最近は自分で作るので備忘録としてメモ。 まずナビゲーション部分のHTML。 <!– navi –> <ul id="navi"> <li class="navi01"><a href="#"><img src="/sample/fadenavi/imgs/navi-01.gif" width="120" height="30" alt="Navigation1" /></a></li> <li class="navi02"><a href="#"><img src="/sample/fadenavi/imgs/navi-02.gif" width="120" height="30" alt="Navigation2" /></a></li> <li class="navi03"><a href="#"><i

div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。 ezColumns デモ [ad#ad-2] ezColumnsの実装例 HTML p要素で実装したパラグラフをdiv要素で内包します。 <div id="groups"> <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done

Captcha security check monodez.com is for sale Please prove you're not a robot View Price Processing

画像のサムネイルやテキストを配置したボックスなど、異なる高さのブロックが数多くあっても全ての高さを等しく揃えるスクリプトを紹介します。 Equal Height Blocks in Rows 一行目と二行目では、違う高さで揃えていることに注目してください。 [ad#ad-2] デモでは異なる高さのブロック（スクリプトオフ時）が、スクリプトによって行ごとに同じ高さに等しく揃えています。 デモページ 実装のアイデアとなったのは、「Making DIVs, using the CSS "Float Left" property...」とのことで、そのdiv要素がどの横列に属しているか調べ、その中で一番高いものに揃えています。 [ad#ad-2] 実装方法 HTML 画像やテキストを配置できるdiv要素を使用しています。 <div id="page-wrap"> <div></div> <div>

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ