マウスポインタが砂時計に
- IE6で、マウスカーソルが砂時計になってチカチカする問題の解決方法を教えてください。
- スクリプトを表示させると、マウスカーソルが砂時計になってチカチカします。チカチカしなくなるようにする方法を教えてください。
- マウスポインタが砂時計になってチカチカする問題を解決したいです。オブジェクトはこれ以上軽くできません。
- ベストアンサー
マウスポインタが砂時計に
IE6で、以下のスクリプトを表示させると、 マウスカーソルが砂時計になって、チカチカします。 <script language="JavaScript"> var x = 10; function hogehoge() { document.getElementById('test').style.left = x + "px"; x++; } setInterval ( 'hogehoge()',50 ) ; </script> <div id="test">xxxx</div> チカチカしなくなるようにしたいのですが、方法が有りましたらご教授願います。 なお、オブジェクトはこれ以上軽くすることは出来ません。 よろしくお願いいたします。
- blue_3s
- お礼率75% (3/4)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは とりあえず質問の方ではそうなってるので大丈夫だと思いますがFirefox用に document.getElementById('rolling').style.left = calcX + "px"; document.getElementById('rolling').style.top = calcY + "px"; にしておいてくださいね（＾＾） 御察しの通り背景画像を何度も読み込んでいるのが原因と考えられます 解消法としてはrolling boxを覆ったものを移動させればいいです <style> .rolling_box { width: 196px; height: 204px; background-repeat: no-repeat; background-color: #CCCCCC; background-image:url("images/box_coming_soon.gif"); } #rolling { position: absolute; } </style> <div id="rolling"><div class="rolling_box" name="rolling1"> 1 </div></div> もしくは背景画像にしているということは上にテキスト文があるのだと思いますから<img>とtextの2つに分けてそれを同時に動かすとか <style> .rolling_box { width: 196px; height: 204px; position: absolute; background-color: #CCCCCC; } #rollings { position: absolute; } </style> </head> <body> <div id="rolling" class="rolling_box" name="rolling1"><img src="images/box_coming_soon.gif"></div> <div id="rollings" name="rolling2">1</div> </body> <script language="JavaScript"> var isshuu = 2880; var hankei = 289; var center_x = 291; var center_y = 343; function setPosition( pos ) { calcPos = ( 2 * 3.14 / isshuu * pos ) + ( 2 * 3.14 / 8 ); calcX = center_x - Math.round( hankei * Math.cos( calcPos ) ); calcY = center_y - Math.round( hankei * Math.sin( calcPos ) ); document.getElementById('rolling').style.left = calcX + "px"; document.getElementById('rolling').style.top = calcY + "px"; document.getElementById('rollings').style.left = calcX + "px"; document.getElementById('rollings').style.top = calcY + "px"; pos++; if ( pos == isshuu ) pos = 0; setTimeout( 'setPosition(' + pos + ')',50 ) ; } setPosition((isshuu/4)); </script>
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
本当にこれが原因ならグローバル変数しかないのでは？ <script language="JavaScript"> var x = 10; var obj=document.getElementById('test').style; function hogehoge() { obj.left = x + "px"; x++; } setInterval ( 'hogehoge()',50 ) ; </script>
お礼
ご回答いただき、ありがとうございます。 いろいろとやっていたら、少し分って来ました。 以下がシンプルにしたソースです。 ハコ（rolling_box）が時計回りに動くというものです。 <html> <head> <style> .rolling_box { width: 196px; height: 204px; position: absolute; background-repeat: no-repeat; background-color: #CCCCCC; background-image:url(images/box_coming_soon.gif); } </style> </head> <body> <div class="rolling_box" id="rolling" name="rolling1">1</div> </body> <script language="JavaScript"> var isshuu = 2880; var hankei = 289; var center_x = 291; var center_y = 343; function setPosition( pos ) { calcPos = ( 2 * 3.14 / isshuu * pos ) + ( 2 * 3.14 / 8 ); calcX = center_x - Math.round( hankei * Math.cos( calcPos ) ); calcY = center_y - Math.round( hankei * Math.sin( calcPos ) ); document.getElementById('rolling').style.left = calcX; document.getElementById('rolling').style.top = calcY; pos++; if ( pos == isshuu ) pos = 0; setTimeout( 'setPosition(' + pos + ')',50 ) ; } setPosition((isshuu/4)); </script> </html> ここで、10行目のbackground-image:url(images/box_coming_soon.gif);をなくすとチカチカしなくなりました。 rolling_boxが動く度に画像を読み込みにいっているような感じにも見えました。 この辺になにかありそうなので、もうちょっと調べてみたいと思います。
補足
グローバル変数を使っていることが原因ということでしょうか？ グローバル変数を使わないでちょっと試してみたいと思います。
関連するQ&A
- 画面が遷移したみたいになってしまいます。
画面ロード後にjavascriptで動的にまたjavascriptタグを表示しています。 以下のjavascriptを組み込んでみたところ、取得したjavascriptを表示したときに画面遷移したみたいになってしまいました。 どうすればきちんと表示されるようになるでしょうか。 <div id="position"></div> <script language="javascript">// <!-- var timer = setInterval("Timer()", 1000); function Timer() { var position = document.getElementById('position'); var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', 'http://hogehoge/getjs'); position.appendChild(script); clearInterval(timer); } // --></script> http://hogehoge/getjsからはコンテンツの部品を表示するjavascriptが入っています。
- 締切済み
- JavaScript
- div要素を滑らかに動かしたい
<div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか？ setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }
- ベストアンサー
- JavaScript
- 砂時計について教えてください。
下のように記述すると、NN、Firefoxの最新版では特に何もないのですが、IEの最新版ではマウスカーソルを動かすたびに砂時計がチカチカと出る理由を教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/JavaScript"> <!-- function over(){document.getElementById("menu0").style.display="block";} function over2(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } document.getElementById("menu"+n).style.display="block"; document.getElementById("menu"+n).style.top=(n*20)-20+"px"; } function out(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } } //--> </script> <table cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <div id="menu0" style="display:none;"> <div onmouseover="over2(1)"><a href="url01.html">link01</a></div> </div> </td> <td valign="top"> <div id="menu1" style="display:none;" onmouseover="over2(1)" onmouseout="out(1)"> <div><a href="url11.html">link11</a></div> </div> <div id="menu2" style="display:none;" onmouseover="over2(2)" onmouseout="out(2)"> <div><a href="url21.html">link21</a></div> </div> <div id="menu3" style="display:none;" onmouseover="over2(3)" onmouseout="out(3)"> <div><a href="url31.html">link31</a></div> </div> </td> </tr> </table>
- ベストアンサー
- JavaScript
- getElementByIdの戻り値がnullになります。
getElementByIdでdivタグのオブジェクトを取得したいのですが、nullとなってしまいます。 以下のコードのどこがいけないのでしょうか。 --- <div id='a'></div> <script language="javascript">// <!-- var a_ = document.getElementById('a'); document.write(a_); // --></script> ---
- ベストアンサー
- JavaScript
- Javascriptで星と月の２つの画像を動かしたいのですが…
星は動きますが、月が動いてくれません。どこが間違ってるのかわからないので、誰かわかる方、教えていただきたいです。よろしくお願いします；； <html> <head> <title>オブジェクトを動かす</title> <style type="text/css"> div {font:30pt ; color:white ; z-index:2} #box {position:absolute ; left:50px ; top:50px; width:400px;height:280px ; background-color:black ; z-index:1} #title1 {position:absolute; left:100px ; top:100px} #title2 {position:absolute; left:80px ; top:50px} #star {position:absolute; left:50px ; top:170px ; z-index:3} #moon {position:absolute; left:50px ; top:170px ; z-index:3} </style> <script type="text/javascript"> var imgStar; var imgMoon; var timerA; var timerB; var x = 50; var y = 170; var dx = 6; var dy = 4; var syototsu = 0; var colorname = "black"; function startMove() { imgStar = document.getElementById("star"); timerA = setInterval("moveImgA()", 50); } function startMoon() { imgMoon = document.getElementById("moon"); timerB = setInterval("moveImgB()", 50); } function moveImgA() { if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function moveImgB() { if(syototsu == 1) changecolor(); imgMoon.style.left = x + "px"; imgMoon.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function changecolor(){ if(colorname == "black"){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function stopTimerA(){ clearInterval(timerA); } function stopTimerB(){ clearInterval(timerB); } </script> </head> <body onload="startMove();" onunload="stopTimerA();"> <body onload="startMoon();" onunload="stopTimerB();"> <div id="box"></div> <div id="title1">StarLight</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="title2">MoonLight</div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- JavaScript内にJavaScriptを読み込む方法
HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- JavaScript内にJavaScriptを読み込む方法
HTML内に <script type="text/javascript" src="main.js"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = '<script language="JavaScript">'; html += 'var url0101 = "url01.xxx.jp";'; html += 'var url02 = "url02.oooo.jp";'; html += '</script>'; html += '<script language="JavaScript" src="http://xxx.xxxx.xxx/test.js"></script>'); html += '<script language="JavaScript">'; html += 'Function01("check")'; html += '</script>'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- コンストラクタとプロトタイプについて
ネットで検索したりして調べているのですがいまいちわからなかった箇所が あるので質問させていただきます。 コンストラクタで設定するのとプロトタイプで設定する違いがいまいちわかりません。 例えば function Test { this.prop = hoge; } Test.prototype.prop1 = hogehoge; の場合 コンストラクタのほうが優先されてhogeがでるのはわかるのですが 下記の場合はプロタイプのほうが優先されてhogehogeと出てしまうのは どうしてでしょうか？ <script language="javascript"> <!-- //コンストラクタ function Test(){alert("hoge"); } //prototypeでセット Test.prototype=alert("hogehoge"); //オブジェクト作成 var TEST = new Test(); window.onload=TEST; --> </script>
- ベストアンサー
- JavaScript
- リアルタイムに時計を表示するときのsetIntervalについて
いつもお世話になっています。 いつも以上に稚拙な質問で申し訳ないのですが、ご助力願います。 <html> <head> <script type="text/javascript"> <!-- var today = new Date(); window.onload = function dispTime(){ document.getElementById("showTime").innerHTML = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate() + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); setInterval('dispTime()',1000); } //--> </script> </head> <body> <div id="showTime"></div> </body> </html> できるだけ<body onload="">を使いたくないので、window.onloadにしてあります。 イメージとしては、document.getElementById("showTime").innerHTMLでshowTimeに時間が表示され、setIntervalで再度disptimeが呼ばれ、という無限ループになればよいと考えてこのソースになりました。 ただ現状は、ロード時に時刻が表示され、そのまま動きません。 たぶんsetIntervalの場所とか使い方がおかしいような気がするのですが、どうもよくわかりません。 参考にしたサイトによってsetInterval("dispTime()"...だったり setInterval("disptime"...だったりと記述がバラバラで、 ほとんどのところでは、body onload="setInterval("...とonload扱いでした。 body onloadは使わずに、1秒ごとに動く時刻表示をするには、どこを直せばよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- オブジェクトがぶつかった時の処理
<script type="text/javascript"> <!-- var imgStar ,imgMoon, timer; var dx = 6, dy = 4, x = 40, y = 160; function startMove(){ if (document.getElementById){ imgStar = document.getElementById("star"); imgMoon = document.getElementById("moon"); timer = setInterval("moveImg()",50); } } function moveImg(){ imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; imgMoon.style.left = (440-x) + "px"; imgMoon.style.top = (320-y) + "px"; x = x + dx; y = y + dy; if (x<=40 || x >= 400) dx = -dx; if (y<=40 || y >= 280) dy = -dy; } function stopTimer() { if (window.clearInterval) clearInterval(timer); } //--> </script> 星と月がぶつかると、お互い逆方向にはね返るようにしたいのですが、この場合どうすれば良いでしょうか？
- 締切済み
- JavaScript
お礼
>解消法としてはrolling boxを覆ったものを移動させればいいです 見事これで解決しました。 ありがとうございました。