- ベストアンサー
画像のスクロール
ホームページを見ている人から速度調節が可能な画像スクロールをしたいのですが検索しても調節できるものはありませんでした。もし知っている方いらっしゃいましたらよろしくお願いいたします。
- 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がそれぞれ一回ごとの間隔と時間になっています。 これが理解できれば自分の使いたいサンプルなどに流用できるかと。 ちなみに私の書いたサンプルは改良すれば 横スクロール、斜めスクロールにもできますし、 画像を見えない地点からスクロールさせたり、 指定した地点でストップさせるようにも簡単に改造できます。 もしこんなものでよければご希望の機能をつけて もう一度ソースをこちらに書かせてもらうので 補足欄にでも希望がありましたら書いてください。 あ、それと画面スクロールなんかも同じ要領でつくれます。
補足
本当にありがとうございます。 これに 画像を見えない地点からスクロールさせたり、 指定した地点でストップさせるには どうすればよいのでしょうか。 もしよろしければお願いいたします。
関連するQ&A
- スクロールしても背景画像が止まって表示されるJavaScript
ホームページでスクロールしても背景画像が止まって表示されるJavaScriptを教えてください。 前まで知っていたんですけど、検索しても見つかりません。よろしくお願いします。
- 締切済み
- JavaScript
- Javaスクリプトで画像を縦にスクロールさせたいです。
Javaスクリプトで画像を縦にスクロールさせたいです。 お世話になります。 ホームページに、流れる画像(リンク付き、複数)を使用したいと思い、 検索したところ以下の参考サイトを見つけました。 http://myako.net/java4/asan/nagare.html こちらでは横スクロールは紹介されているのですが、 それを縦にスクロールさせたいと思い調べてみたものの 恥ずかしながら初心者なものでさっぱり判りません。 どうかアドバイスをください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像をボタンでスクロール
ホームページ作成自体、初挑戦の超初心者です。 http://m-cat.net/index2.html ↑こちらのページのように、（左側の漢字のボタンを押した先に出てくる素材の画面です）ボタンを押すと画像が次の画像へとスクロールするものを作りたいのですが、色々検索してみてもイマイチ分かりません。 ソースを見てもよく分からないもので＾＾； 分かりやすいやり方、参考になるページなどありましたら教えて下さい。
- ベストアンサー
- JavaScript
- マウスに反応した画像スクロール
例えば500px×500pxの画像があるとして、それを200px×200pxのサイズのFlashで見せたいと思っています。当然Flashの方がサイズが小さいので画像の全体像は見えませんが、マウスの動きに反応して右なら右、下なら下にスクロールさせたいのです。このとき、ループではなく、画像の端までスクロールしたら止めたい（できればゆっくり・そっと止めたい）んですが、検索しようとしてもせいぜい「action script 画像 スクロール」ぐらいしか思いつかず、そういったスクリプトのサンプルが見つかりません。もしご存じの方、慣れているからそれぐらいなら書いてやるというような優しい方、おられましたらよろしくおねがいします。 イメージとしてはこんな感じです。 http://www.uniden.jp/jijitsu/
- ベストアンサー
- Flash
- 画像の無限スクロールについて
FLASH初心者です。 いろいろ探しましたが、上手くいかず、わからないのでアドバイスお願いします。 ページが読み込まれると同時に、画像が下から上に向かう無限スクロールをさせたく、いろいろやってみましたが、どうしても途切れて空白になる時間が出来てしまったり、繋ぎがスムーズにいかなかったりします。 画像は縦62pxが1つ、縦82pxが4つの2セットをグループ化し、625.4pxとなっています。 ソースは、ホームページで検索したのを参照しました。 ↓ onClipEvent(enterFrame) { this._y -= 3;; if(this.getBounds(_root).yMax < 0) { this._y += 625.4;; } } なにとぞ宜しくお願いします。
- ベストアンサー
- Flash
- 背景はスクロールされないようにするには？
ホームページで、上下にスクロールしても 背景画像はスクロールされない（文字等だけスクロールされる）ようにするには どういうHTMLを使えばいいのでしょうか？ 教えて下さい。よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- スクロールさせないと収まらない画像をキャプチャーするには？
スクロールさせないと収まらない画像をキャプチャーするには？ スクロールさせないと収まらない縦に長い画像があります。 分割せずに一括でキャプチャーするにはどうすれば良いでしょうか。 例えば、添付画像で画面先頭からスクロールーから下の方までキャプチャーしたいです。
- ベストアンサー
- Windows XP
- スクロールしても、画像を一定のところに表示したい
現在、勉強しながらホームページを作っています。 HTMLは何とか理解できたと思っている程度です。 現在作成中のページで「できればいいな」と思っているのですが、ページの内容が多くなると、当然、たてにスクロールしなければならなくなりますよね。 そのとき、例えば、左上の隅に表示されていた画像は、スクロールとともに上に消えていってしまいます。 これを、スクロールしても画面の左上に表示し続けるということができないでしょうか？ 素人考えで「JAVAScriptならなんとかなるかな？」と思ってここに問い合わせを書きました。 よろしくお願いします。
- ベストアンサー
- JavaScript
- スクロール速度を遅くすることってできますか？
こんにちは、ＰＣの設定にあまり詳しくないので困っています。 ボクはシャープのＰＣ－ＢＪ１４０ＭというノートＰＣを使っていますが、仕事上、表やグラフ等を検索することが多いんです。それで、例えば、画面を下にスクロールしたいときに、カーソルを右下の▼に持って行き、指でひとつずつトントンと下げるか、キーボード中の上下の矢印を同じくトントンとひとつずつ下げていますが、長時間になるとかなり指も疲れちゃいます。ずっと押しっぱなしにするとオートでスクロールできますが、この場合あまりにもスクロールする速度が早いため、画面の文字等はほとんど読めません。 そこで、このオートのスクロールで、文字が読める程度にスクロール速度を遅くすることが出来ればと思うのですが、ＰＣの設定や裏技でこのようなことは可能でしょうか？ 詳しい方がいらっしゃいましたら是非教えて下さい。 宜しくお願い致します。
- ベストアンサー
- ノートPC
お礼
ありがとうございます。 本当に良くわかりました。 たびたびの質問に答えていただきありがとうございます。