- PR -

カレンダーコントロールで

«前のページへ 1|2|3|4|5|6|7
投稿者投稿内容
SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-09 21:51
お世話になります。

> もう少し悩んでください
色々、ページをあさってみました。setTimeout() この関数は、セットした時間が何秒でも直ちに次の行に実行が移動するようですね。そして指定時間になったらそこに記述したステップを実行するみたいですね。
ということで下記のように書いてみました。なんとなく予定通り動いているようにみえます。フェードもつけてみました。この機能は、若干不満です。（思ったほど切れがないような気がするため。ＣＳＳの色設定などが原因かも）
こんな具合でいいんでしょうか？

コード:

var nFade=0;

var nStart=0;



div.tooltip {

	position:absolute;

	width:300px;

	height:120px;

	border:outset 1px #CC00CC;

	background-color:#99FF66;

	filter:alpha(opacity=85);

	left:0px;

	top:0px;

	z-index:4;

	visibility:hidden;

	white-space:nowrap;

}

function showToolTip(){

      //alert(1);

      setTimeout(function() {

          var tt = document.getElementById("ToolTip");

	 tt.style.visibility = "visible";

	 if(nStart == 0)

	     fadein();

	 return tt;

    }, 700);

            

    return document.getElementById("ToolTip");

}

function fadein()

{

         nStart = 1;

	if (nFade > 100) {

	     clearTimeout(timer);

	     nStart = 0;

	     return;

	}

	nFade += 10;

	document.all["ToolTip"].filters["alpha"].opacity = nFade;

	timer = setTimeout("fadein()", 50);

}


[ メッセージ編集済み 編集者: SL 編集日時 2008-08-09 21:54 ]

[ メッセージ編集済み 編集者: SL 編集日時 2008-08-09 21:55 ]
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-08-09 23:16
＞＞なんとなく予定通り動いているようにみえます。
これが大事です。
スクリプト作成の基本はまずは動けば良しとし、内容を吟味したり
理解を深めるためにもう少し違う書き方をしてみたり、JavaScript
のHPを探して自分よりスキルのあるコードを発見して新たな技を身
に付けたり。まずは、多少不満はあるものの、自分の今の技量では
精一杯までの動くものを自力で作ることが大事ですね。



＞＞フェードもつけてみました。この機能は、若干不満です。
＞＞（思ったほど切れがないような気がするため。ＣＳＳの色設定などが原因かも）
＞＞こんな具合でいいんでしょうか？

じゃ、またヒントだけ。
arguments.callee
ってのがあります。
これで再帰構造のフェードインフェードアウトを作って下さい。
不満な部分はおそらく、一定速度で見えてくる部分でしょう？
加速度付けて出したいのかな？

0.5 とか 0.7 を掛けて、タイマーを起動する際に起動時間を速く
したり遅くしたりすることで加速しているように見えます。起動
時間は一定で、透明度に倍率を掛けることで 100 に早く近づく
ようにすることでも出来ます。


SL
大ベテラン
会議室デビュー日: 2008/05/02
投稿数: 183
投稿日時: 2008-08-10 10:58
お世話になります。

> 不満な部分はおそらく、一定速度で見えてくる部分でしょう？
まさにそれです。
arguments.callee の使い方は、ちょっと厄介ですね。
この例だと、値が倍々され（1,2,4,8,16,32,64...）100%までだとすぐに達してしまいあらい感じがします。階乗に計算されるのでこの解釈でいいのですね。
別に、気にする程度ではなさそうですが....
おかげさまで、そこそこのレベルになりました。ありがとうございます。

コード:
function showToolTip(){
     setTimeout(function() {
           var tt = document.getElementById("ToolTip");
	  tt.style.visibility = "visible";
	  if(nStart == 0)
	         fadein();
	  return tt;
      }, 700);
            
   return document.getElementById("ToolTip");
}
/* arguments.callee http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs02/ajaxjs02_04.html */
function fadein()
{
      nStart = 1;
      if (nFade > 10) {
	   clearTimeout(timer);
	   nStart = 0;
	   return;
       }
       nFade += 10;
       var n = factorial(nFade-1);
       if(n < 70)
	    document.all["ToolTip"].filters["alpha"].opacity = n; //nFade;
       else
	    document.all["ToolTip"].filters["alpha"].opacity = 70;
       timer = setTimeout("fadein()", 50);
}
function factorial(n) {
      if (n == 0) {
          return 1;
      } else {
          return n * arguments.callee(n - 1);
      }
}
«前のページへ 1|2|3|4|5|6|7

スキルアップ／キャリアアップ（JOB@IT）