03 | 2017/04 |  05

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jquery.js におけるアニメーションコードの解読 ( 7 )

ボックスアニメーションのサンプル

このエントリイでは jquery.js におけるアニメーションコードのこれまでの解読を踏まえて、一寸一息いれることとします。アニメサンプルを多数用意して、その解説を試みます。

ここでいう、ボックスアニメーションとは私が勝手に名付けた名称ですが、配置指定された div 要素のアニメーションを意味しています。

個々のボックスのアニメーションを 12 種類、その他これらのボックスを利用したアニメーションを 6 種類、計 18 種類のアニメを作成し、その挙動に関する解説を行い、末尾には作成したスクリプトを付けました。

18 種類のアニメーションサンプル

下のボタンをクリックすると隠蔽/表示アニメーションが起動します。 各々のボタンには、隠蔽と表示の 2 機能を持たせました。

ぼっくす 1
toggle()
ぼっくす 2
toggle(2000)
ぼっくす 3
起終点:中心
ぼっくす 4
起終点:右上
ぼっくす 5
起終点:右下
ぼっくす 6
起終点:左下
ぼっくす 7
起終線:上
(文字も変化)
ぼっくす 8
起終線:左
(文字無変化)
ぼっくす 9
起終点:左上(文字も変化)
ぼっくす 10 width だけ toggle
ぼっくす 11 borderWidth だけ toggle
ぼっくす 12 borderWidthをAnim 

▲ToTop

18 のサンプルアニメーションの解説

1 : $().toggle() の挙動

jQuery インスタンスの toggle メソッドの例です。引数なしでこのメソッドを起動すると、$(htis).is(":hidden") メソッドによって当該要素の隠蔽/表示状態をチェックします。

その結果に応じて、もし true ならば $(this).hide() が、あるいは false ならば $(this).show() がそれぞれ起動され、それぞれのメソッドによって、this.style.display.none と this.style.display.block の切り替えが行われ、隠蔽と表示がアニメートされます。「時間」に係るコードは全く含まれないので、瞬時に行われる単純なアニメとなります。

2 : $().toggle(2000) の挙動

1 と同じ jQuery インスタンスの toggle メソッドの例ですが、動作時間を指定した引数がある点が異なります。

この引数があると toggle メソッドの定義から animate(genFx("toggle",3),"slow") メソッドが起動され、この genFx("toggle",3) 関数実行によって margin、padding 及び content サイズ( height と width )並びに opacity の 4 つの( 正確には margin と padding にはそれぞれ左右上下があるので、2×4+3 で 11種類の )プロパティがアニメーション対象となります。

ここで興味深いことは border がアニメ対象になっていないということです。当然のことですが、color プロパティと違って、border は jquery.js のアニメに馴染まない訳ではありません。実際 borderWidth を問題なくアニメ対象プロパティとして扱えることは、上のサンプル 11&12 で示した通りです。

※ 実は color をアニメ対象とする jquery 拡張版 ui があります。effects.core.js の中に含まれています。

そもそも、border には幅の他に、値が数値ではない色とスタイルの属性があります。そのため border そのものはアニメ対象プロパティから除外したのかもしれません。borderWidth だけでもアニメ対象プロパティにしてもおかしくないはずなのですが、fxAttrs の対象にしなかったのはどうしてでしょうか。理由は判然としません。

さて、上の 11 のアニメ対象プロパティを対象として、animate メソッドの沢山のコードが進行します。animate メソッドの第 1 引数に genFx("toggle",3) が指定されたことにより、jQuery.fx のインスタンス e から、e.hide() や e.show() メソッドが起動され、そこから e.step() メソッドが起動されます。

こうして、11 のプロパティの値が、当初の表示状態値と 1 ( e.show() メソッドにおいて width と height プロパティを扱う場合 ) 又は 0 ( その他のプロパティの場合 )の間を漸減/漸増させられて、アニメーションが引き起こされます。

最後に、$().toggle(2000) メソッドが、アニメ対象要素の左上に収斂し、その左上から展開されることに留意する必要があります。何故ならば、e.hide() や e.show() メソッドは、margin、padding、width、height を 0 に( e.show() メソッドの場合 width と height は 1 に )遷移させるのですから、左上に収斂しそこから展開することになるのです。

更に、これらのメソッドは不透明度も 0 と 1 の間を漸減/漸増させるため、不透明と透明の間を行き来することになります。

ここで触れたアニメの終点/起点の位置指定こそ、animate メソッドを扱う上での最も重要なポイントです。

▲ToTop

3 : ボックス中心を起終点とするアニメの挙動

ボックス 2 では左上がアニメの起終点でした。当然その起終点位置を変えてみたくなります。

「 $().toggle メソッドを使う前提で、どうすれば起終点位置を変えられるか? 」───かなり悩みました。toggle メソッドは e.show() や e.hide() メソッドを呼び出しますが、その中でプロパティ値は 0 又は 1 に変更されます。つまり起終点は左上です。そして toggle メソッドの定義から、何らかの引数により位置指定を変えることは不可能です。結局、位置指定は toggle メソッドでは行えません。このメソッドでは必ず左上に収斂し、そこから展開するアニメしか演出できません。

そしてさんざん考え抜いた結果ついに...。
「 位置指定を別のメソッドで行い、かつそれを toggle メソッドと並行起動すればよい」───このことに気がつきました。

起終点位置だけを指定するアニメーションメソッドは、基本的に top、left の初期値と終了値を適切に設定することになります。(アニメ対象要素は一般に position 指定を「絶対」か「相対」に指定しますので top 及び left が指定できます。)

具体的な対応方法はこのエントリイ最下部に掲載したコードを見て戴くとして、苦労した点を記録しておきます。

ボタンクリックでアニメを励起させていますが、そのボタンはボックスの表示アニメにも、あるいは隠蔽アニメにも、両刀使いするように設計してあります。

そして、初期状態がボックスの表示となっているのですから、toggle メソッドの別の使い方( click の度に 2 つの関数を交互に起動する toggle メソッド )を利用する方法もあります。しかしここでは、もっと一般的な方法を探りました。

ここで提示したアニメサンプルの場合、収斂/展開するアニメーションの起終点(線)を同一にしてあります。それが自然だからですが、同一の点や線から始まり/終わるアニメの場合、その初期値と終了値は正負の符号が異なる同一の絶対値となります。そこで、ボタンのクリック回数が奇数回か偶数回かによって、外サイズ取得値の正負を反転させて、起終点( あるいは起終線 )位置とするようコーディングしました。

▲ToTop

4 : ボックス右上を起終点とするアニメの挙動

今度はボックスの右上を起終点とするアニメです。style.top ±= 0 及び style.left ±= box 外幅から、起終点値を出しました。

隠蔽/表示のトグル起動は 3 と同様の奇数回/偶数回による方法で対処しました。以下 5、6 共同様。

5 : ボックス右下を起終点とするアニメの挙動

ボックスの右下を起終点とするアニメです。style.top ±= box 外高さ及び style.left ±= box 外幅から、起終点値を出しました。

6 : ボックス左下を起終点とするアニメの挙動

ボックスの左下を起終点とするアニメです。style.top ±= ボックス外高さ 及び style.left ±= 0 により起終点値を出しました。

7 : ボックス上辺を起終線とするアニメの挙動

ここからアニメの趣が変わります。これまでは全て $().toggle メソッドを利用してきました。起終点位置を ( 0, 0 ) 以外とするために animate メソッドを併行起動させた場合も、全て toggle メソッドとの併行起動でした。

ところが 7、8、10 ~ 12 番目のサンプルは toggle メソッドを使っていません。但し、12 番目のサンプル以外はアニメ用 CSS オブジェクトのプロパティ値を "toggle" としていますので、プロパティ値を "toggle" とした場合の animate メソッドのコーディングによって、不透明度はアニメ対象になりませんが、縮小するアニメの場合には必ず最後に消滅し、展開する場合には最初に表示されます。

さて、7 番目のサンプルでは、縦方向のサイズに係るプロパティだけ( height、marginTop、marginBottom、paddingTop 及び paddingBottom )をアニメ対象とした上で、更に文字サイズもアニメ対象に追加してみました。

起こされるアニメは slideUp メソッドに酷似していますが、slideUp メソッドは使用せず、fxAttrs 配列を拡張した exAttrs と、genFx と全く同一な Fx メソッドを使用してアニメートさせました。
( ここに独自に定義した配列とメソッドは、共に無名関数内のローカル変数としました。)

▲ToTop

8 : ボックス左辺を起終線とするアニメの挙動

7 の変形でボックス左辺に畳み込み、そこから拡幅するメソッドです。文字サイズはアニメ対象としていません。アニメ用プロパティ値に "toggle" を指定しているので、縮小後に隠蔽され( display.none )、展開直前に表示が再開( display.block )されます。

9 : ボックス左上を起終点とし文字サイズも変えるアニメの挙動

このアニメも exAttrs と Fn を活用して極めて短いコーディングで作りました。ボックス 2 の挙動に文字の変化を加えたものです。

10 : width だけをアニメ対象プロパティとした挙動

アニメプロパティとして width だけを対象と、animate メソッドの第 1 引数であるアニメ用 CSS プロパティ値を "toggle" としました。従って、不透明度はアニメ対象とはなりませんが、縮小後に隠蔽され、展開直前に表示が再開されます。

11 : borderWidth をアニメ対象とした挙動

jquery.js では borderWidth を標準的なアニメ操作対象としていないので、敢えてそれを対象としたアニメを作ってみました。

ここでも、animate メソッドの第 1 引数であるアニメ用 CSS プロパティ値を "toggle" としたので、不透明度はアニメ対象とはなりませんが、外枠線が細くなっていって最終的にボックスは hide され、他方、枠線が太くなる前にボックスが show されます。

12 : borderWidth だけを animate させ、かつ step メソッドを利用した挙動

最後のサンプルはボーダーサイズだけを animete メソッドの対象とし、かつ、toggle 値を使っていないので、border 幅がゼロに縮小されても決してボックスは隠蔽されません。

また、animate メソッドの第 2 引数 speed をオブジェクトとして指定し、このサンプルだけ唯一 e.options.step メソッドを利用して、アニメーションの起動回数をカウントさせました。こうして 12 のサンプルの中で最もカスタマイズ度の高いものになりました。

アニメーションを起動すると、起動回数がボックス内文字列の最後に追加され、ストップウォッチのようにカウンタ数が変化します。

この animate メソッドではアニメ対象プロパティを 4 つ指定していますので、各プロパティ毎の起動回数は、カウンタ値を 4 で割れば算出できます。

なお、アニメーションの起動回数は、duration 指定時間、CPU の性能、メモリの空き具合、ブラウザの Javascript 解析/実行性能等に左右されますから、同じ duration 指定であってもブラウザとパソコンの性能毎に異なることになります。

▲ToTop

13 : 全てのアニメを一斉に起動する挙動

12 番目までのサンプルを一斉にアニメーションさせたいと思い、それを実行しました。

スクリプトは、ボタン click メソッドの引数において、各アニメ起動関数を対象として each メソッドで巡回処理しているだけです。

14 : 全てのアニメを順次起動する挙動

12 番目までのサンプルを一斉にアニメーションさせた次には、一斉ではなく順次起動させることもおもしろい、と思い立ちそれを実行しました。

スクリプトでは、ボタン click メソッドの引数における 12 番目までのアニメ起動関数を、setTimeout 関数を使って一定間隔で遅延させながら巡回処理しました。

15: ランダムに 2 つのボックスを選択させて入れ替える挙動

一斉及び順次起動するアニメーションの次には、乱数関数を使って任意に 2 つのボックスを選択させ、それらの位置を互いに入れ替えるアニメーションを考えました。2 つのボックスの top 値と left 値を相互に入れ替えるだけなので決して複雑なコーディングは要りません。

なお、ここでは 弾性的動きを引き起こす easing 関数を採用してみました。この結果「イヤイヤしながら仕方なく移動する」ような動きとなりました(爆爆WWW)

16: 6 つのボックスを同時に入れ替える挙動

2 つのボックス入れ替えをやってみたら、もっと多くのボックスを同時に入れ替えてみたいと思い、それを実現しました。

注意した点は、必ず 異なる 6 つのボックスを選択させなければならない、ということです。1 ~ 12 迄の乱数を乱数関数で発生させ、そのうちの 6 個を使うわけですから、関数からの返値が同じ値になる可能性は非常に高いわけです。

大変冗長なコードになりましたが、返値について 1 つずつ同じかどうかチェックし、同じ場合には乱数発生をやり直して、必ず 6 つの値が異なるようにしました。

なお、折角の機会なので easing 関数は全て異なるものを使ってみました。

17: ボックス位置交換をタイムラグを持たせて行う挙動

更に、ボックス入れ替えを同時にではなく、タイムラグを持たせて実行してみたい、と思いそれを実現しました。

タイムラグは setTimeout 関数で animate メソッドの起動を遅延させて実現しました。

18: ボックスの並び順を整列する挙動

12 個全てのボックスを瞬時に番号順に整列します。ボックスの番号を頼りに top 値と left 値を算出する代数式を考え、コーディングして全ボックスを瞬時に整列するようにしました。入れ替わった箇所だけを元に戻すのは大変なので、簡便で安易な方法を採用しました(^^;。

上の 18 アニメサンプルに関するスタイルシートとスクリプト

■ スタイル設定
 #animArea {
  width:485px; height:440px;margin-top:1em;
  position:relative; background:lightcyan;
  padding:10px;
  text-align:center;
  line-height:1.2em;
 }
 button.btn {margin:5px; overflow:visible; padding:2px;}
 #box1_724, #box2_724, #box3_724, #box4_724, #box5_724, #box6_724,
 #box7_724, #box8_724, #box9_724, #box10_724, #box11_724, #box12_724 {
  position:absolute;left:10px;
  margin:10px 10px 10px 10px;
  border:palegoldenrod 10px ridge;
  padding:5px;
  width:110px; height:60px;
  background:royalblue;
 }
 #box4_724, #box5_724, #box6_724 {
  top:120px;
 }
 #box7_724, #box8_724, #box9_724 {
  top:230px;
 }
 #box10_724, #box11_724, #box12_724 {
  top:340px;
 }
 #box2_724, #box5_724, #box8_724, #box11_724 {
  left:170px;
  border:lightblue 10px outset;
 }
 #box3_724, #box6_724, #box9_724, #box12_724 {
  left:330px;
  border:plum 10px inset;
 }
■Javascript
(function(){
 var exAttrs = [
  // height animations
  [ "height", "marginTop", "marginBottom", "paddingTop", 
   "paddingBottom", "borderTopWidth","borderBottomWidth" ],
  // width animations
  [ "width", "marginLeft", "marginRight", "paddingLeft",
   "paddingRight", "borderLeftWidth","borderRightWidth" ],
  // opacity animations
  [ "opacity" ],
  // fontsize animations
  [ "fontSize" ]
 ];
 function Fn( type, num ){
  var obj = {};
  jQuery.each( exAttrs.concat.apply([], exAttrs.slice(0,num)), function(){
   obj[ this ] = type;
  });
  return obj;
 }
 var i=1,j=13,$btn=[],$box=[],hidden=[],even=[],w=[],h=[],flag=[],duration=2000;
 for (; i<j; i++) {
  $btn[i] = $("#btn" + i +"_724");
  $box[i] = $("#box" + i + "_724");
  hidden[i] = $box[i].is(":hidden");
  w[i] = !hidden[i] && $box[i].outerWidth() || 0;
  h[i] = !hidden[i] && $box[i].outerHeight() || 0;
  flag[i]=0;
 }
 for (var i=13; i<19; i++) {
  $btn[i] = $("#btn" + i +"_724");
 }
 $("button.btn").hover(
 	function(){$(this).css("background-color","paleturquoise")},
 	function(){$(this).css("background-color","")}
 ).toggle(
  function(){$(this).css("background-color","thistle")},
  function(){$(this).css("background-color","palegreen")}
 );

 if(!$box[12].is(":hidden")) {
  var bordLeft =  $box[12].css("border-left-width"),
  bordRight = $box[12].css("border-right-width"),
  bordTop = $box[12].css("border-top-width"),
  bordBottom = $box[12].css("border-bottom-width");
 }
 $box[12].append("<span/>");

 function anim1(){$box[1].toggle();}
 function anim2(){$box[2].toggle(duration);}
 function anim3(){
  var even = ++flag[2] % 2 === 0,
   leftAnim=( ( hidden[3] + even ) ? "-=": "+=" ) + w[3]/2 +"px",
   topAnim=( ( hidden[3] + even ) ? "-=" : "+=" ) + h[3]/2 +"px";
  $box[3].toggle({queue:false,duration:duration})
   .animate( {left:leftAnim, top:topAnim},duration );
 }
 function anim4(){
  var even = ++flag[3] % 2 === 0,
   leftAnim=( ( hidden[4] + even ) ? "-=": "+=" ) + w[4] +"px";
  $box[4]
   .animate( {left:leftAnim},{queue:false,duration:duration} )
   .toggle(duration);
 }
 function anim5(){
  var even = ++flag[5] % 2 === 0,
   leftAnim=( ( hidden[5] + even ) ? "-=": "+=" ) + w[5] +"px",
   topAnim=( ( hidden[5] + even ) ? "-=" : "+=" ) + h[5] +"px";
  $box[5]
   .animate( {left:leftAnim, top:topAnim},{queue:false,duration:duration} )
   .toggle(duration);
 }
 function anim6(){
  var even = ++flag[6] % 2 === 0,
   topAnim=( ( hidden[6] + even ) ? "-=" : "+=" ) + h[6] +"px";
  $box[6]
   .animate( {top:topAnim},{queue:false,duration:duration} )
   .toggle(duration);
 }
 function anim7(){$box[7].animate(
  $.extend(Fn("toggle",1),{fontSize:"toggle"}),duration
 )}
 function anim8(){$box[8].animate({
  width:"toggle",marginLeft:"toggle",marginRight:"toggle",
  paddigLeft:"toggle",paddingRight:"toggle",borderLeftWidth:"toggle",
  borderRightWidth:"toggle"},duration
 )}
 function anim9(){$box[9].animate(Fn("toggle",4),duration);}
 function anim10(){$box[10].animate({width:"toggle"},duration)}
 function anim11(){$box[11].animate({
  borderLeftWidth:"toggle", borderRightWidth:"toggle",
  borderTopWidth:"toggle", borderBottomWidth:"toggle"
 },duration)}
 function anim12(){
  var k=0, even = ++flag[12] % 2 === 0,
  leftAnim = (( hidden[12] + even ) ? "+=": "-=") + bordLeft;
  rightAnim = (( hidden[12] + even ) ? "+=": "-=") + bordRight;
  topAnim = (( hidden[12] + even ) ? "+=": "-=") + bordTop;
  bottomAnim = (( hidden[12] + even ) ? "+=": "-=") + bordBottom ;
  $box[12].animate({
    borderLeftWidth :leftAnim, borderTopWidth:topAnim, 
    borderRightWidth:rightAnim, borderBottomWidth:bottomAnim
   },{
	  duration:duration, step : function(){k++; $(this).children().text(k);}
   }
  );
 }

 var animList =[anim1,anim2,anim3,anim4,anim5,anim6,anim7,anim8,anim9,anim10,anim11,anim12];
 $.each(animList,function(i,n){ $btn[i+1].click(n) });
 $btn[13].click(function(){$.each(animList,function(i,n){n()})});
 $btn[14].click(function(){
  $.each(animList,function(i,n){setTimeout(n,400*i)})
 });
 // 乱数を使って 2 つのボックスの位置を交換する
 $btn[15].click(function(){
  var A = parseInt(Math.random()*12)+1,
    B = parseInt(Math.random()*12)+1,posA={},posB={};
  while ( A===B ){
    B = parseInt(Math.random()*12)+1;
    if (A!==B) break;
  }
  var $boxA=$("#box"+A+"_724"),$boxB=$("#box"+B+"_724");
  $boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
  $boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
 });
 // 乱数を使って 6 つのボックス位置を一瞬で入れ替える
 $btn[16].click(function(){
  var A = parseInt(Math.random()*12)+1,
   B = parseInt(Math.random()*12)+1,
   C = parseInt(Math.random()*12)+1,
   D = parseInt(Math.random()*12)+1,
   E = parseInt(Math.random()*12)+1,
   F = parseInt(Math.random()*12)+1,
   posA={},posB={},posC={},posD={},posE={},posF={};
  while ( A===B ){
   B = parseInt(Math.random()*12)+1;
   if (A!==B) break;
  }
  while ( C===A || C===B){
   C = parseInt(Math.random()*12)+1;
   if (C!==A &&C!==B) break;
  }
  while ( D===A || D==B || D===C){
   D = parseInt(Math.random()*12)+1;
   if (D!==A && D!==B && D!==C) break;
  }
  while ( E===A || E==B || E===C || E===D){
   E = parseInt(Math.random()*12)+1;
   if (E!==A && E!==B && E!==C && E!==D) break;
  }
  while ( F===A || F==B || F===C || F===D || F===E){
   F = parseInt(Math.random()*12)+1;
   if (F!==A && F!==B && F!==C && F!==D && F!==E) break;
  }
  var $boxA=$("#box"+A+"_724"), $boxB=$("#box"+B+"_724"),
   $boxC=$("#box"+C+"_724"), $boxD=$("#box"+D+"_724"),
   $boxE=$("#box"+E+"_724"), $boxF=$("#box"+F+"_724");
  $boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
  $boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
  $boxC.animate({top:$boxD.css("top"),left:$boxD.css("left")},duration,"easeInOutExpo");
  $boxD.animate({top:$boxC.css("top"),left:$boxC.css("left")},duration,"easeInOutQuart");
  $boxE.animate({top:$boxF.css("top"),left:$boxF.css("left")},duration,"easeInOutCirc");
  $boxF.animate({top:$boxE.css("top"),left:$boxE.css("left")},duration,"easeInOutBack");
 });

 // ボックス位置交換をタイムラグを持たせて行う
 $btn[17].click(function(){
  var A = parseInt(Math.random()*12)+1,
    B = parseInt(Math.random()*12)+1,
    C = parseInt(Math.random()*12)+1,
    D = parseInt(Math.random()*12)+1,
    E = parseInt(Math.random()*12)+1,
    F = parseInt(Math.random()*12)+1,
    posA={},posB={},posC={},posD={},posE={},posF={},delay=800;
  while ( A===B ){
   B = parseInt(Math.random()*12)+1;
   if (A!==B) break;
  }
  while ( C===A || C===B){
   C = parseInt(Math.random()*12)+1;
   if (C!==A &&C!==B) break;
  }
  while ( D===A || D==B || D===C){
   D = parseInt(Math.random()*12)+1;
   if (D!==A && D!==B && D!==C) break;
  }
  while ( E===A || E==B || E===C || E===D){
   E = parseInt(Math.random()*12)+1;
   if (E!==A && E!==B && E!==C && E!==D) break;
  }
  while ( F===A || F==B || F===C || F===D || F===E){
   F = parseInt(Math.random()*12)+1;
   if (F!==A && F!==B && F!==C && F!==D && F!==E) break;
  }
  var $boxA=$("#box"+A+"_724"), $boxB=$("#box"+B+"_724"),
    $boxC=$("#box"+C+"_724"), $boxD=$("#box"+D+"_724"),
    $boxE=$("#box"+E+"_724"), $boxF=$("#box"+F+"_724");
  $boxA.animate({top:$boxB.css("top"),left:$boxB.css("left")},duration,"easeInOutBounce");
  $boxB.animate({top:$boxA.css("top"),left:$boxA.css("left")},duration,"easeInOutElastic");
  setTimeout(function(){
   $boxC.animate({top:$boxD.css("top"),left:$boxD.css("left")},duration,"easeInOutExpo");
   $boxD.animate({top:$boxC.css("top"),left:$boxC.css("left")},duration,"easeInOutQuart");
  },delay);
  setTimeout(function(){
   $boxE.animate({top:$boxF.css("top"),left:$boxF.css("left")},duration,"easeInOutCirc");
   $boxF.animate({top:$boxE.css("top"),left:$boxE.css("left")},duration,"easeInOutBack");
  },delay*2);
 });

 // ボックスを整列する
 $btn[18].click(function(){
  for (var i=1; i<13; i++){
   $box[i].css({top:110*parseInt((i-1)/3)+10 +"px",left:(i-1)%3*160+10 +"px"});
  }
 });
})();

▲ToTop

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/724-9fab6aa9

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200908091346
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。