人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【JavaScript】以下のソースはIEでしか動きません。これをFireFox等でも動くようにするにはどのようにソースを変えればいいですか?もしもこのソースでは全体的に無理がある場合、同じような動きをするにはどのようなソースが必要でしょうか?
★高ポイント&イルカ差し上げます。
http://fluc.xsrv.jp/sample.html

●質問者: tsuntsuku
●カテゴリ:インターネット ウェブ制作
✍キーワード:firefox IE JavaScript イルカ ソース
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● GEN111
●300ポイント ベストアンサー

サンプルは 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>
◎質問者からの返答

ありがとうございます!

助かりました!!

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


2 ● wnagata
●10ポイント

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ