bata's log

フロントエンド系のTipsとかメモ

jQuery

スクロールすると表示されるナビゲーション

スクロール型のナビゲーションがあるサイトで、一定の位置までスクロールするとナビゲーションが固定で出てくるサイトがあります。 こういうの↓ http://gion-renge.jp/ これが結構よく使う演出なので使いまわせるように書いてみました。 function NavControl…

画像ロールオーバーをオブジェクト指向的な書き方で・・・その2

基本的な機能を使いまわして、通常のロールオーバーとフェード付きを作ってみた。 クローン画像の生成のあたりはもう少し改善できそうな気がする。 kawabataryo/imgRollover kawabataryo/imgRollover · GitHub

JavaScript(jQuery)で画像のサイズを取得する際のエラー

ドはまりしたのでメモ。 .appendとかで生成した<img />の場合、widthやheightを指定していない事がありますが、これが画像の幅や高さを取得する際にハマる原因になったりします。 高さが取得できない!

JSONからデータを取得して配列にフィルターをかける

WEBアプリ開発でJSONデータを扱うことになったのでメモ。 実際に作り始めると色々な機能追加がありそうなので、対応出来るような書き方を目指してみた。 JavaScript (function(window,namespace,$){ function _Item(dataFilter,i,$_list){ this.member_id = …

アニメーション用のタイムライン管理

Javascriptで何場面もあるようアニメーションを実装する場合に、シーンごとにアクションと発火点をタイムラインのように管理できたらよいのかなと思って書いてみた。 (function(window,namespace,$){ window[namespace] = { play: function(){ var len = thi…

フェード付きの画像ロールオーバーを作ってみた

画像のロールオーバーでフェードエフェクトがついたものを書いてみた。 ロールオーバー用のクローン画像を生成して元画像の後ろに配置して、元画像をフェードすることで効果を出します。 汎用性が出るように画像と親要素に直接CSSが付加されるようにしていま…

jQueryプラグインのテンプレート

jQueryプラグインを作成する時の基本的な形をメモ。 ;(function($){ //option var option = { option01: 'value01', option02: 'value02' } $.fn.pluginName = function(params){ params = $.extend(option,params); //core return this.each(function(){ })…