Memorandum
BookJavaScript / jQueryroa-scale

ロールオーバーアクション、シンプルシリーズ。今回はただただ単純に拡大縮小です。
動作は単純だが、チョコチョコ問題もありますので、そこらへんをメモします。

Sample

サンプル見ると分かりますが、3種作ってます。いまどき風にcssのみでレイアウトするものはいい感じですね。
角丸も表現できないようなヤツ（IEのお古さん）は、ほっときたいのですが、まだまだたくさんいらっしゃるので、それように角丸を画像で表現しようとしたところ、画像の拡大縮小でやはり気持ち悪い動きになる。どうしたものか。
力不足でこの問題が解決に至らなかったので、いまのところ画像を使わなければならない場合は拡大縮小は控えた方がいいですね。
お粗末なメモでした。ちゃんちゃん。

jQuery

$(document).ready(function(){
		
	var SELECTOR = '.scalebt';
	var $navi = $(SELECTOR)

	// 各項目のマウスオーバーを設定
	$navi.find('.box li, .circle1 li, .img li').toArray().forEach(initRollOverAction);
	return;
		
	// マウスオーバー
	function initRollOverAction(li,index) {
	    
	    var $original = $(li);
	    
	    //開いているページ対応のメニュー（クラスに_nowのあるもの）には設定しないので、離脱。
	    if($original.attr('class').indexOf('_now') !== -1){
	    	return;
	    	}
	    
	    //
	    var $parent = $original.parent();
	    var $a = $original.find('a');
	    
	    $a.append("/test"); //デバッグ用出力。
	    
	    $original.css({
	    	position: 'relative'
	    	});
	    $a.css({
	    	position: 'absolute',
	    	top: '0',
	    	left: '0'
	    	});
	    
	    var className = $original.attr('class') + '_over';
	    	    
	    var $over = $('<div>').css({
	    	position: 'absolute',
	    	top: '0',
	    	left: '0',
	    	width: '100%',
	    	height: '100%'
	    	}).attr('class',className);
	    		    
	    if($parent.hasClass('img')){
	    	var $clone = $a.find('img').clone();
	    	$a.find('img').remove();
	    	//alert($clone.attr('src'));
	    	$clone.css({width:'100%',height:'100%'});
	    	}		
	    
	    $over.append($clone)    	
	    $original.append($over);
	    
	    $a.bind('mouseenter',onMouseEnter);
	    $a.bind('mouseleave',onMouseLeave);
	    
	    var $ss = "90%";
	    var $ssp = "5%";
	    
	    function onMouseEnter(){
	    	$over.stop().animate({width:$ss,height:$ss,left:$ssp,top:$ssp}, 50);
	    	}
	    function onMouseLeave(){
	    	$over.stop().animate({width:'100%',height:'100%',left:'0%',top:'0%'}, 200);
	    	}
	    		    
	    }

});