- ベストアンサー
画像のスクロール
ホームページを見ている人から速度調節が可能な画像スクロールをしたいのですが検索しても調節できるものはありませんでした。もし知っている方いらっしゃいましたらよろしくお願いいたします。
- yoichrou
- お礼率31% (5/16)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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がそれぞれ一回ごとの間隔と時間になっています。 これが理解できれば自分の使いたいサンプルなどに流用できるかと。 ちなみに私の書いたサンプルは改良すれば 横スクロール、斜めスクロールにもできますし、 画像を見えない地点からスクロールさせたり、 指定した地点でストップさせるようにも簡単に改造できます。 もしこんなものでよければご希望の機能をつけて もう一度ソースをこちらに書かせてもらうので 補足欄にでも希望がありましたら書いてください。 あ、それと画面スクロールなんかも同じ要領でつくれます。
補足
本当にありがとうございます。 これに 画像を見えない地点からスクロールさせたり、 指定した地点でストップさせるには どうすればよいのでしょうか。 もしよろしければお願いいたします。
お礼
ありがとうございます。 本当に良くわかりました。 たびたびの質問に答えていただきありがとうございます。