0

私は 650 X 610 px の歴史的な鉄道地図を作成しています。空白の地図から始めて、鉄道の断片だけを含む透明な .png レイヤーをフェード インし、1 つずつ重ねて、鉄道の画像を作成したいと考えています。ネットワーク全体。

ネットワークが拡張された日付のリストがあり、クリックするとその行が表示されます。ソリッド イメージを使用して簡単に実行できますが、非常に遅く、31 個のイメージがあります。

これに関するフォーラムのクエリはどこにも見つかりませんでした。誰か助けてください。

4

1 に答える 1

0

この簡単な例を試してください（Opera10およびFirefox2でテスト済み）。各画像は同じサイズである必要があります。各レイヤーが同じ場所に配置されることを意味します。

変更する必要があるのは次のとおりです。

  • 完全なマップに一致するブロック内のすべてwidthとheight値（ピクセル単位） 。<style>

  • 各layerdataレイヤーの日付選択テキストのオブジェクト（date）と画像のURL （）を含む配列url。

  • animdelay。フェードイン/フェードアウトの不透明度レベルごとのミリ秒（1/1000秒）単位の遅延。デフォルトは100msです。合計10の不透明度レベルがあります。アニメーションを高速化するには、遅延を減らします。

sample.html：

<html>
  <頭>
    <スタイル>
      #dates label {display：block; }
      #frame {border：1px solid black; 幅：500px; 高さ：500px; }
      .layer {
        "progid：DXImageTransform.Microsoft.Alpha（Opacity = 0）";
        filter：alpha（opacity = 0）;
        不透明度：0; 位置：絶対; 幅：500px; 高さ：500px;
      }
    </ style>
  </ head>
  <本体>
    日にち：
    <div id = "dates">
    </ div>
    <div id = "frame">
    </ div>
    <スクリプト>
      //InternetExplorerの要素の不透明度を取得します
      function getOpacityIE（ele）{//レベルを返します：0-100
        ele.filters[0].opacityを返します。
      }
      //InternetExplorerの要素の不透明度を設定します
      function setOpacityIE（ele、level）{//レベル：0-100
        ele.filters [0] .opacity = level;
      }
      //Web標準ブラウザの要素の不透明度を取得します
      function getOpacityStd（ele）{//レベルを返します：0-100
        return（ele.style.opacity！=''？ele.style.opacity * 100：0）;
      }
      //Web標準ブラウザの要素の不透明度を設定します
      function setOpacityStd（ele、level）{//レベル：0-100
        ele.style.opacity =（level / 100）.toFixed（1）;
      }
      //ターゲットの日付インデックスに基づいて各レイヤーをフェードイン/フェードアウトします
      関数animate（）{
        var done = true;
        for（var i = 0; i <layers.length; i ++）{
          var Adjust = i <= dateidx？10：-10;
          var level = getOpacity（layers [i]）;
          if（（（adjust> 0）&&（level <100））||（（adjust <0）&&（level> 0）））{
           setOpacity（layers [i]、level + Adjust）;
           done = false;
          }
        }
        if（！done）animtimer = window.setTimeout（animate、animdelay）;
      }
      //レイヤーインデックスを設定/更新して、表示/非表示およびアニメーション化します
      function setdate（ele）{
        window.clearTimeout（animtimer）;
        dateidx =ele.attributes['index']。value*1;
        animate（）;
      }
      //既存の日付の下に日付選択を追加します
      関数addselection（idx、date）{
        var a = document.createElement（'LABEL'）;
        a.htmlFor ='date' + idx;
        a.innerHTML ='<input id = "date' + idx +'" index = "'+ idx +'" name = "date" type = "radio" onclick = "setdate（this）" />' + date;
        dates.appendChild（a）;
      }
      //既存のレイヤーの上にレイヤー（画像）をフレームに追加します
      関数addlayer（idx、url）{
        var a = document.createElement（'IMG'）;
        a.className='レイヤー';
        a.src = url;
        layers.push（a）;
        frame.appendChild（a）;
      }
      // layerdata：下から上へ
      var layerdata = [
        {日付： '2000-01-01'、URL：'image1.png'}、
        {日付： '2000-01-08'、URL：'image2.png'}、
        {日付： '2000-01-15'、URL：'image3.png'}、
        {日付： '2000-01-22'、URL：'image4.png'}
      ];
      //不透明度レベルあたり1/1000秒単位のアニメーション遅延
      var animdelay = 100;
      //ランタイム変数
      var dateidx = -1;
      varlayers = [];
      var animtimer = 0;
      if（typeof（frame.style.opacity）！='undefined'）{
        var getOpacity = getOpacityStd;
        var setOpacity = setOpacityStd;
      } そうしないと {
        var getOpacity = getOpacityIE;
        var setOpacity = setOpacityIE;
      }
      //日付の選択とレイヤーを生成します
      for（var i = 0; i <layerdata.length; i ++）{
        addselection（i、layerdata [i] .date）;
        addlayer（i、layerdata [i] .url）;
      }
    </ script>
  </ body>
</ html>
于 2012-07-20T05:22:43.507 に答える