【JavaScript】以下のソースはIEでしか動きません。これをFireFox等でも動くようにするにはどのようにソースを変えればいいですか?もしもこのソースでは全体的に無理がある場合、同じような動きをするにはどのようなソースが必要でしょうか?

★高ポイント&イルカ差し上げます。
http://fluc.xsrv.jp/sample.html

回答の条件
  • 1人3回まで
  • 登録:2007/05/19 14:59:09
  • 終了:2007/05/19 20:19:54

ベストアンサー

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/05/19 17:57:43

ポイント300pt

 サンプルは IE の独自機能を使っているっぽかったので、作り直してみました。スタイルシートも同じようなところはまとめました。

 IE6、Firefox2.0.0.3、Opera9.20 (Windows2000環境)にて動作を確認しました。

 加速の仕方が多少オリジナルとは異なると思います。

<html>
  <head>
    <script type="text/javascript">
      var position = 0 ;
      var speed ;
      var accel ;
      var topos ;

      function goMenu(buttonid) {
        topos = -800 * (buttonid-1) ;
        if (document.getElementById('myDiv').style.left == topos) return ;
        accel = (topos - position) / 500 ;
        speed = 0 ;
        tid = setInterval('move()', 10) ;
      }

      function move() {
        position += speed ;
        speed += accel ;
        if ((accel > 0 &amp;&amp; position >= topos)
             || (accel < 0 &amp;&amp; position <= topos)) {
               position = topos ; clearInterval(tid) ;
           }
        document.getElementById('myDiv').style.left = position ;
      }
    </script>

    <style type="text/css">
      body {
        background : black ;
        overflow : hidden ;
      }

      span.button {
        color : white ;
        font-size : 11pt ;
        text-align : center ;
        position : absolute ;
        top : 0 ;
        width : 50 ;
        height : 20 ;
        border : 1 solid black ;
        cursor : pointer ;
      }

      div.number {
        color : white ;
        font-family : Arial ;
        font-size : 10pt ;
        text-align:center;
        background-color : black ;
        width : 100 ;
      }

      #myDiv .part {
        position : absolute ;
        top : 20 ;
        width : 800 ;
        height : 200 ;
      }
    </style>
  </head>

  <body>
    <span id="myButton1" style="background-color:red;   left:0;"   onclick="goMenu(1)" class="button">ONE</span>
    <span id="myButton2" style="background-color:green; left:50;"  onclick="goMenu(2)" class="button">TWO</span>
    <span id="myButton3" style="background-color:blue;  left:100;" onclick="goMenu(3)" class="button">THREE</span>
    <span id="myButton4" style="background-color:yellow;left:150;" onclick="goMenu(4)" class="button">FOUR</span>

    <!-- 全体を囲むdiv開始 -->
    <div id="myDiv" style="position:absolute;top:0;left:0;">

      <div style="left:0;background-color:red;" class="part">
        <div class="number">001</div>
        <h2 style="font-size:16pt;font-family:Arial;">スクロールメニュー</h2>
      </div>
      <div style="left:800;background-color:green;" class="part">
        <div class="number">002</div>
        <a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a><br>
      </div>
      <div style="left:1600;background-color:blue;" class="part">
        <div class="number">003</div>
        <a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a><br>
      </div>
      <div style="left:2400;background-color:yellow;" class="part">
        <div class="number">004</div>
        <a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a><br>
      </div>

    </div>
    <!-- 全体を囲むdiv終了 -->
  </body>
</html>
id:tsuntsuku

ありがとうございます!

助かりました!!

イルカもらってください。

2007/05/19 20:18:08

その他の回答(1件)

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/05/19 17:57:43ここでベストアンサー

ポイント300pt

 サンプルは IE の独自機能を使っているっぽかったので、作り直してみました。スタイルシートも同じようなところはまとめました。

 IE6、Firefox2.0.0.3、Opera9.20 (Windows2000環境)にて動作を確認しました。

 加速の仕方が多少オリジナルとは異なると思います。

<html>
  <head>
    <script type="text/javascript">
      var position = 0 ;
      var speed ;
      var accel ;
      var topos ;

      function goMenu(buttonid) {
        topos = -800 * (buttonid-1) ;
        if (document.getElementById('myDiv').style.left == topos) return ;
        accel = (topos - position) / 500 ;
        speed = 0 ;
        tid = setInterval('move()', 10) ;
      }

      function move() {
        position += speed ;
        speed += accel ;
        if ((accel > 0 &amp;&amp; position >= topos)
             || (accel < 0 &amp;&amp; position <= topos)) {
               position = topos ; clearInterval(tid) ;
           }
        document.getElementById('myDiv').style.left = position ;
      }
    </script>

    <style type="text/css">
      body {
        background : black ;
        overflow : hidden ;
      }

      span.button {
        color : white ;
        font-size : 11pt ;
        text-align : center ;
        position : absolute ;
        top : 0 ;
        width : 50 ;
        height : 20 ;
        border : 1 solid black ;
        cursor : pointer ;
      }

      div.number {
        color : white ;
        font-family : Arial ;
        font-size : 10pt ;
        text-align:center;
        background-color : black ;
        width : 100 ;
      }

      #myDiv .part {
        position : absolute ;
        top : 20 ;
        width : 800 ;
        height : 200 ;
      }
    </style>
  </head>

  <body>
    <span id="myButton1" style="background-color:red;   left:0;"   onclick="goMenu(1)" class="button">ONE</span>
    <span id="myButton2" style="background-color:green; left:50;"  onclick="goMenu(2)" class="button">TWO</span>
    <span id="myButton3" style="background-color:blue;  left:100;" onclick="goMenu(3)" class="button">THREE</span>
    <span id="myButton4" style="background-color:yellow;left:150;" onclick="goMenu(4)" class="button">FOUR</span>

    <!-- 全体を囲むdiv開始 -->
    <div id="myDiv" style="position:absolute;top:0;left:0;">

      <div style="left:0;background-color:red;" class="part">
        <div class="number">001</div>
        <h2 style="font-size:16pt;font-family:Arial;">スクロールメニュー</h2>
      </div>
      <div style="left:800;background-color:green;" class="part">
        <div class="number">002</div>
        <a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a><br>
      </div>
      <div style="left:1600;background-color:blue;" class="part">
        <div class="number">003</div>
        <a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a><br>
      </div>
      <div style="left:2400;background-color:yellow;" class="part">
        <div class="number">004</div>
        <a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a><br>
      </div>

    </div>
    <!-- 全体を囲むdiv終了 -->
  </body>
</html>
id:tsuntsuku

ありがとうございます!

助かりました!!

イルカもらってください。

2007/05/19 20:18:08
id:wnagata No.2

wnagata回答回数170ベストアンサー獲得回数182007/05/19 18:11:17

ポイント10pt

Firefoxでは、animateMotionが未実装なようです。

http://developer.mozilla.org/ja/docs/SVG_in_Firefox

id:tsuntsuku

情報ありがとうございます

2007/05/19 20:17:47

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません