以下のコードで、幅６７０ピクセルの範囲で１００～６００ピクセルの範囲で左から右に動く動画を表示させて、０～１００と６００～６７０の範囲では表示させないようにする動作を繰り返しているのですが、１００で画像が現れる時と、６００で画像が消えていく時に、いっぺんに消えたり現れたりするのではなく、marqueeのようにその境界で、徐々に消えたり現れたりするように動作を変更したいのですが、これをJavascritoで実行したい場合、どういった書き方をすればいいのでしょうか？ご経験のある方は、御教示願えればと思います。指定範囲内を動き続ける画像 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.pixelLeft = xmid_u) && (img1.style.pixelLeft = xmax) { // x = 2; img1.style.pixelLeft = 0; } } function tm(){ // タイマー setInterval("move()",30); }

marqueeをJavascriptで書く方法

解決済

質問者：tmiyoshi
質問日時：2011/03/29 12:48
回答数：2件

以下のコードで、幅６７０ピクセルの範囲で１００～６００ピクセルの範囲で左から右に動く動画を表示させて、０～１００と６００～６７０の範囲では表示させないようにする動作を繰り返しているのですが、
１００で画像が現れる時と、６００で画像が消えていく時に、いっぺんに消えたり現れたりするのではなく、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>

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： fujillin
回答日時：2011/03/29 16:14

とりあえず思いつく方法は…

・画像の一部を表示するのならclipを利用するとか
　http://w3g.jp/css/display_position/clip

・あるいは親要素を設けておいて、overflow:hiddenに設定しておくとか
　http://w3g.jp/css/display_position/overflow

簡単な方で、二番目を利用した例
* スクリプトは画像を移動しているだけで、後はブラウザ任せという方法
* bodyのmarginやpaddingなどがあるので、位置は正確にはご質問通りではありません。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#box{
position: relative;
width: 500px;
height: 50px;
margin-left: 100px;
overflow:hidden;
}
#box img{
position:absolute;
}
</style>
</head>
<body>

<div id="box">
<img src="btn2.gif" alt="">
</div>

<script type="text/javascript">

</script>
</body>
</html>