マウスポインタが砂時計に

解決済

質問者：blue_3s
質問日時：2007/09/13 20:36
回答数：2件

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>

チカチカしなくなるようにしたいのですが、方法が有りましたらご教授願います。
なお、オブジェクトはこれ以上軽くすることは出来ません。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： leap_day
回答日時：2007/09/15 04:24

こんにちは

とりあえず質問の方ではそうなってるので大丈夫だと思いますが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>

- 0
- 件

通報する

この回答へのお礼

>解消法としてはrolling boxを覆ったものを移動させればいいです

見事これで解決しました。
ありがとうございました。

通報する

お礼日時：2007/09/15 10:05

No.1

回答者： taloo
回答日時：2007/09/14 08:16

本当にこれが原因ならグローバル変数しかないのでは？

この回答への補足

グローバル変数を使っていることが原因ということでしょうか？
グローバル変数を使わないでちょっと試してみたいと思います。

補足日時：2007/09/14 10:39

通報する

- 0
- 件

通報する

この回答へのお礼

ご回答いただき、ありがとうございます。

いろいろとやっていたら、少し分って来ました。
以下がシンプルにしたソースです。
ハコ（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が動く度に画像を読み込みにいっているような感じにも見えました。
この辺になにかありそうなので、もうちょっと調べてみたいと思います。