- ベストアンサー
画像のスクロール
ホームページを見ている人から速度調節が可能な画像スクロールをしたいのですが検索しても調節できるものはありませんでした。もし知っている方いらっしゃいましたらよろしくお願いいたします。
- yoichrou
- お礼率31% (5/16)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<img src="1.jpg" name="img" id="img" style="position:absolute;top:100;left:0;"> のtop:数値；left:数値；はそれぞれ画像の画面左上からの topは上からの位置、leftは左からの位置になっています。（数学のグラフのｙの方向だけ逆にしたようになっている） つまり、見えない地点から移動させたい場合は、 topやleftに0以下の値を入れればいいわけです。 <img src="1.jpg" name="img" id="img" style="position:absolute;top:0;left:-100;"> ただし、注意としては画像を完全に見えない地点から動かす場合、topやleftを画像のサイズ以上のマイナスの値を入れないとはみ出てしまいます。 次に指定した地点で移動を止めたいということでしたので、私の最初の回答のソースの if(sw2==1){ clearTimeout(tm); tm=setTimeout("roll()",ms); } の部分を if(sw2==1&&p<ストップする地点の座標){ clearTimeout(tm); tm=setTimeout("roll()",ms); } に変えればいいです。 ストップする地点の座標には数値を入れてください。 また、うまく指定した地点に止まらない時は step=数値; の数値を調整してみてください。 ＜余談＞←混乱する恐れがあるので必要ない場合は読まなくて結構です。 ただし、上の変更例は画像を右方向または下方向に動かす場合で、 画像を左方向または上方向に動かす時は （手順1） if(p>500||p<0){ sw=-sw; } を消す。 （手順2） 次に画像を右方向または下方向に動かす場合の変更部分を、 if(sw2==1&&p>ストップする地点の座標){ clearTimeout(tm); tm=setTimeout("roll()",ms); } に書き換える。 （不等号の向きが逆になります。 p>ストップする地点の座標 と p<ストップする地点の座標 のように>が<になっています） の二つの手順を行えばいいです。 それと当然、 sw=-1; としておかないといけません。
その他の回答 (1)
- m035
- ベストアンサー率44% (38/86)
↓こんなの作ってみました。おそらくこれがyoichrouさんのやりたいことではないでしょうか？メモ帳にでもコピーしてためしに実行してみてください。 <html> <head> <script type="text/javascript"> <!-- var sw=1; var sw2=0; var step=1; var ms=100; var tm; var p=0; function roll(){ if(p>500||p<0){ sw=-sw; } p+=sw*step; document.getElementById("img").style.left=p; document.getElementById("info").value="移動幅"+step+"px,間隔"+ms+"ms"; if(sw2==1){ clearTimeout(tm); tm=setTimeout("roll()",ms); } else{ document.getElementById("info").value="停止中"; } } function oi(){ if(sw2==0){ sw2=1; roll(); } else{ sw2=0; roll(); } } //--> </script> </head> <body> <input type="button" value="移動開始/停止" onclick="oi()"> <input type="text" size="25" name="info" id="info" value="停止中"> <br> 一定時間の移動幅： <input type="button" value="1px" onclick="step=1"> <input type="button" value="10px" onclick="step=10"> <input type="button" value="20px" onclick="step=20"><br> 移動の間隔（ミリ秒）： <input type="button" value="1ms" onclick="ms=1"> <input type="button" value="50ms" onclick="ms=50"> <input type="button" value="100ms" onclick="ms=100"><br> <img src="1.jpg" name="img" id="img" style="position:absolute;top:100;left:0;"> </body> </html> やっていることは理解できたでしょうか？ 変数msとstepがそれぞれ一回ごとの間隔と時間になっています。 これが理解できれば自分の使いたいサンプルなどに流用できるかと。 ちなみに私の書いたサンプルは改良すれば 横スクロール、斜めスクロールにもできますし、 画像を見えない地点からスクロールさせたり、 指定した地点でストップさせるようにも簡単に改造できます。 もしこんなものでよければご希望の機能をつけて もう一度ソースをこちらに書かせてもらうので 補足欄にでも希望がありましたら書いてください。 あ、それと画面スクロールなんかも同じ要領でつくれます。
補足
本当にありがとうございます。 これに 画像を見えない地点からスクロールさせたり、 指定した地点でストップさせるには どうすればよいのでしょうか。 もしよろしければお願いいたします。
お礼
ありがとうございます。 本当に良くわかりました。 たびたびの質問に答えていただきありがとうございます。