山本圭助 :: Recent Entries

$("element").imgloader(options);

	var options = {
		imglist: [
			"photo/0.jpg",
			"photo/1.jpg",
			"photo/2.jpg",
			"photo/3.jpg"
		],
		width: 1200,
		height: 896,
		callback: function() {
			// コールバック処理
		}
	}
	
	// loader
	$("#imgContainer").imgloader(options);


// HTML
	

デモはこちらから

ダウンロードはこちらから

リサイズイベント発生時に要素内の画像サイズをウィンドウサイズに合わせて変更する。
最小サイズを指定しておけば、それより小さくはならない。

【 実行方法 】

$("element").fitter(options);

【 オプション 】
width: 画像の初期横幅
height: 画像の初期縦幅
minWidth: 最小横幅
minHeight: 最小縦幅
selector: フィッティングさせる要素を指定する。初期値は"img"。

デモはこちらから

ダウンロードはこちらから

フローティングなナビゲーションを作るjQueryプラグイン

↑に位置固定(position: fixed)の機能を追加した。

もちろん、IE6にも対応。

floater.js

サンプル デモ

オプションや使い方などは前記事を参照ください。

fixedオプションを追加。

ナビゲーションなどのコンテンツをスクロールに追従させ、画面の上下に接着させるjQueryプラグイン。

どこかで見たような気がするのだが、どこで見たか思い出せない＆探してもすぐ出てこないので、作ってみた。

floater.js

サンプル デモ

使い方は簡単。
よくある感じで、動かしたい要素でfloaterメソッドを実行する。

	$(element).floater();

オプションは以下の通り。

• marginTop: 上の余白
• marginBottom: 下の余白
• agility: 0～1。0はナビが通り過ぎるまで待つ。1はナビの末端が出るとすぐ動きだす。
• speed: アニメーションにかける時間
• easing: イージング
• fixed: trueでposition: fixedに切り替え。初期値はfalse。

オプションを適用すると、こんな感じ。

	$("nav").floater({
		marginTop: 60,
		marginBottom: 80,
		wait: 0.75,
		speed: 800,
		easing: "easeInQuad"
	});

追記： 2012/04/04 オプションを追加しました。

最前面(末尾)の要素をfadeOutさせたのち、最背面(先頭)へ移動させ、show()している。その繰り返し。
CSSは特に指定していないので、同じ場所で切り替える場合は、position: absoluteなどで重ねておく必要あり。

【 実行方法 】

$(parent-element).fadechanger({ selector: child-element });

【 オプション 】
speed: 切り替えにかける時間をミリ秒で指定。初期値は2000。
wait: 次の切替までの待ち時間をミリ秒で指定。初期値は2000。
selector: 要素内のどの子要素を切り替えるかを指定する。省略した場合は、すべての子要素が対象となる。
(例) { selector: ".opened" }とした場合は、openedというクラス名を持った子要素のみが対象となる。
loop: 切替のループ回数を数値で指定。初期値は"infinite"（無限）。

デモ（無限繰り返し）

デモ（ループしない）

ダウンロードはこちらから

というわけで、ちょっとだけ使いやすくしました。
まだ付けたい機能があるので、おいおい追加していきます。

使い方は以前の記事「jQueryプラグインなスライダー slider.js」を参考ください。

基本的には、以下のような感じで使えるお手軽仕様です。

	<div class="slideFrame" id="slide-00">
		<ul class="slideGuide">
			<li class="slideCell">セル</li>
			<li class="slideCell">セル</li>
		</ul>
	</div>

	<script>
		$("#slide-00").slider();
	</script>

"背景だけ"を透過させたい時には、background-colorにrgba()で色と不透明度を指定してやるだけでOKです。
･･･最近のブラウザは。

rgba()に対応してないブラウザ、まぁ主にアレですが･･･にもオリジナルな素晴らしい機能filter: alpha()があります。
filter: alpha(opacity=50)とやると要素の不透明度が50％になるというやつです。
0.5じゃなくて50と指定するところもまた強い自己主張を感じますね。昔気質とでも言いましょうか。

しかし、この素敵機能filter: alpha()では、"背景だけ"でなく子要素含め、すべて透過してしまいます。
とても面倒見が良いです。

しかし、今回のように"背景だけ"に透過を適用したい。そんな時は"DirectX FilterのGradient Filter"の出番です。

これを使って背景にグラデーションしないグラデーションを適用してやるのです。

filter: progid:DXImageTransform.Microsoft.Gradient()
progidのコロンの後に空白を入れないように注意！

引数は以下の通り

• Enabled = 0 / 1
  1(true)でグラデーション機能の有効化。デフォルトは1。
• GradientType = 0 / 1
  グラデーションの方向。0は縦方向。1は横方向。
• StartColorStr = #00000000～#FFFFFFFF
  なんかちょっと長いここが今回のポイント！
  グラデーションの開始の透明度＋色をaRGB形式で指定します。aは00(透明)～FF(不透明)
• EndColorStr = #00000000～#FFFFFFFF
  グラデーションの終了の透明度＋色。

// 白の半透明
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
background-color: rgba(255, 255, 255, 0.5);

IEはrgba()の指定を無視するので、これで「背景だけに透過」が適用されます。めでたしめでたし。

あけましておめでとうございます。
今年もバンバンやっていきまっせ！

というわけで、本年一発目はhashchangeイベントについて。

hashchageイベントとは、URLに#～とつく例のあれが変更された時に発生するイベント。
kinect.jp - Kinect for Xbox 360などでも使われてますね。

hashchange対応ブラウザへの実装

IE8、FF3.6以上、Chrome8、Safari5、Opera10、など主流ブラウザの最新版なら対応している。

サンプルデモ

注意点。
a要素を使ってハッシュを付加する場合、
preventDefaultやreturn falseなどをすると、ハッシュが付かなくなる。
また、jQuery1.4.4現在、hashchange()メソッドは未サポートなので、
使用する際はbind()メソッドを使ってwindowのhashchangeにbindさせるようにする。

hashchange非対応ブラウザへの実装

IE7以下、FF3.5以下などは未対応なので、下記のようなsetIntervalを使って対応するか、
「jQuery hashchange event プラグイン｣を使うことで実装できる。

// リンク時にページ番号とハッシュを付加
clearInterval($.timerId.anchor);
location.hash = "!" + this.className;
$.page = location.hash;
$.anchor();

// チェックメソッド
anchor: function(){
    $.timerId.anchor = setInterval(function(){
        var i = 0;
        if ($.page !== location.hash){
            switch(location.hash){
                case "#!what": i = 1; break;
                case "#!news1": i = 2; break;
                case "#!news2": i = 3; break;
                case "#!spec": i = 4; break;
            }
            // 該当するページへ戻す。
            $(".navi").eq(i).click();
        }
    }, 200);
}

var ox, px, sx;

var $screen = $("#object");

var drag = function(event){

    px = event.pageX || event.originalEvent.touches[0].pageX;

    if(sx + px - ox < (最左値) || (最右値) < sx + px - ox) return false;

    $screen.css("left", sx + px - ox)

};

var reset = function(){

    $(document).unbind(mousemove, drag).unbind(mouseup, reset);

};

$screen.bind(mousedown, function(event){

    event.preventDefault();

    sx = $screen.position().left;

    ox = event.pageX || event.originalEvent.touches[0].pageX;

    $(document).bind(mousemove, drag).bind(mouseup, reset);

});