※ ChatGPTを利用し、要約された質問です（原文：marqueeをJavascriptで書く方法）
marqueeをJavascriptで書く方法
このQ&Aのポイント
Javascriptでmarqueeのような動作を実装する方法について教えてください。
画像が徐々に消えたり現れたりするような動作を実現するにはどうすればいいのでしょうか？
指定範囲内で左から右に動く画像を表示させ、一部の範囲では表示させないようにする方法を教えてください。
以下のコードで、幅６７０ピクセルの範囲で１００～６００ピクセルの範囲で左から右に動く動画を表示させて、０～１００と６００～６７０の範囲では表示させないようにする動作を繰り返しているのですが、
１００で画像が現れる時と、６００で画像が消えていく時に、いっぺんに消えたり現れたりするのではなく、marqueeのようにその境界で、徐々に消えたり現れたりするように動作を変更したいのですが、これをJavascritoで実行したい場合、どういった書き方をすればいいのでしょうか？
ご経験のある方は、御教示願えればと思います。
<html>
<head>
<title>指定範囲内を動き続ける画像</title>
<script type="text/javascript">
xmin = 0; // 左 動く範囲の設定
ymin = 0; // 上
xmax = 670; // 右
ymax = 360; // 下
xmid_l = 100;
xmid_u = 600;
//x = 1;
// y = 1;
function move(){ // 画像の移動
img1.style.pixelLeft = img1.style.pixelLeft + 1;
if((img1.style.pixelLeft >= xmin) && (img1.style.pixelLeft <= xmid_l )) {
img1.style.visibility = 'hidden';
}
if((img1.style.pixelLeft >= xmid_l) && (img1.style.pixelLeft <= xmid_u )) {
img1.style.visibility = 'visible';
}
if((img1.style.pixelLeft >= xmid_u) && (img1.style.pixelLeft <= xmax )) {
img1.style.visibility = 'hidden';
}
if(img1.style.pixelLeft >= xmax) {
// x = 2;
img1.style.pixelLeft = 0;
}
}
function tm(){ // タイマー
setInterval("move()",30);
}
</script>
</head>
<body onLoad="tm()">
<img src="./img/img2.gif" ID="img1" STYLE="position:absolute;top:100;left:200">
</body>
</html>
お礼
返信遅くなって申し訳ないです。 これでうまくいくようです。JavaScriptの問題というよりは、ブラウザの表示方法の仕方の問題ということですね。 ありがとうございました。