サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
pops-web.com
jQuery アニメーションの中でも「ビルドイン」スタイルの show() fadeIn() slideToggle() toggle() 等についての使用方法と注意点などに関することです。ほぼ知識が無くとも簡単に実装できる利点があります。 jQuery アニメーションの種類 ● show() fadeIn() slideToggle() toggle() 等の「ビルドイン」スタイルで手軽に利用できるものと、 ● animate()のカスタムアニメーションの2種類が有ります。「ビルドイン」のアニメーションでは対応できない場合に利用します。 1. アニメーションの実態は小刻みにCSSを変更(変化)させているだけです。 2. 「ビルドイン」スタイルは簡単に実装できますが、細やかな条件を付けることが出来ません。 (それなりの限定された定形の動きになりますが利用頻度は高い) 3. カスタムアニメー
「Google Webフォント」もよろしいのですが、自分用の好みのWebフォントを作り、複数のWebフォントをサイトにUploadしてCanvasでの使用表示を試してみました。 表示方法としてCSS3、@font-face を使用する方法と、WebFont Loader を使用する方法の2種類にどんな違いがあるのでしょうか、実際にテストしてみます。 CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用するテスト 「Google Webフォント」は便利ですが、今回はWebフォントを作り、複数のWebフォントをサイトにUploadしてCreateJSで使用する方法について調べ、実際にテストして問題があるか考慮してみます。 ▼[ 簡単な説明の目次に進む ] DEMO ▼[ 目次 ] CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用す
Accordion Menu サンプル 3種類 簡易方式の「開閉連動形アコーディオン」です。他のラベルを押せば開いているところが自動で閉じるタイプですが、処理を単純化したため「同時開閉」になります。 「閉じてから開く」よりも「同時開閉」の方が見やすいと思いますが、どうでしょうか。 簡単な説明 [1]を例にしますと、下記のような簡単な記述で「開閉連動形」になります。 これは動かす部分が「div要素」ですから、next('div')、.siblings('div:visible')、となっています。 「ul dl 要素」なら其の部分が変わるだけです。 //クリックアクション設定 $('.accordion-d').find('h3').click(function() { $(this).next('div').slideToggle('fast') .siblings('div:visibl
2014/12/13/EaselJSなどバージョンUPされました(easeljs-0.8)。easeljs-0.8用に更新しています。(2015/02/27) 「Tickerクラス」はバージョン easeljs-0.8 addEventListenerメソッドで説明しますので、昔のaddListenerメソッドは言及しません。on() off()で設定する方法が増えている。 以下、説明はテストなどの結果であり、記述方法などは個人により違うかとは思います。 あくまでも私は「初心者」ですので、正確を期すには「専門家」の記事等を参照クダサイ。 [ 目次 ] addEventListenerメソッドの使用方法 ▲[ 目次 ] addEventListenerメソッドは色々なイベントに対するリスナー設定して処理する関数であるが、ここでは「Ticker」クラスに限定しての説明です。他のイベントは別ペー
サンプル accordion の簡単な説明 HTML CSS は下記のように共通です。JSはIDを付与して操作しています。内部リストは一番問題の出ない「dl dt」で記述しました。他のページの「アコーディオン」拠り「単純効率化」しています。 HTML #accordion-30の場合。IDが違う場合は該当のIDを記入する。 <div id="accordion-30" class="accordion-box"> <h3>MENUブロック1</h3> <div class="accordion-block"> <dl> <dt><a href="javascript:void(0);">リンク</a></dt> <dt><a href="javascript:void(0);">リンク</a></dt> <dt><a href="javascript:void(0);">リンク</a></
Accordion Menu サンプル 4種類 accordion 31 は「閉じてから開く」よりも「同時開閉」の方が見易いと思いますが、どうでしょうか。 このサンプルは、初期時、1番目(上段)が開いた状態に設定されています。 toggleクリック関数を使用しないJS、(オブジェクトを保存したJS) オブジェクトを保存したJSで多少は速くなります。(前ページと若干の違い有り) accordion29-accordion32、多少効率良くなり早くなる。基本的にこの4種類があれば事足りる。 //Accordion (function($){ //accordion29表示/非表示 の切り替え $(function(){ //オブジェクトを保存 var accordionItem=$('#accordion-29'); //一旦全部消す accordionItem.find('div').hid
jQueryによるブラウザ判定を行うには「jQuery.browser」を使用して判別(必ずしも正確ではない)できるのは周知のとおりであり、非推奨であることもご存知だと思います。さてjQuery-1.9から完全に削除されるようです。 jQuery-1.9から「jQuery.browser」が完全にサポートされなくなる 「jQuery.browser」を使用して判別している場所も多々ありますので、jQuery-1.9から完全にサポートされなくなることは困ります。推奨される「jQuery.support」だけでは処理仕切れない事もあり、IE6 7 8 と問題だらけですので、バージョンに応じた処理をしなければならないこともあります。どうしても簡単な判別法が必要です。 この記事は古くなっていますので、最新の記事をUPしましたので下記記事を参照ください。2014/04/01 IE10 IE11 を含
jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。 new Image()での、画像読み込み表示 jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。ネットで調べれば沢山の情報がありますが、私の場合の経験を踏まえて記述します。 Image()が使用される理由は、 1. 表示サイズではなく画像の実寸を得ることができる。 2. 画像にアクセスして、ロード完了を知ることができる。 3. ERRORの場合の処理ができる。(余り使用はされていないが、、) 4. Loading中の「Loading画像」など表示させる時に便利。 5. jQueryで画像のロードに適したメソッドがない。(ほとんどが、html text な
このページを最初にブックマークしてみませんか?
『pops-web.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く