- 締切済み
htmlでのスクロールの停止方法
タグを手打ちして細々ＨＰを作成しているのですが、MARQUEEコマンドを使った下から上へのスクロールで、最後の文字が表示されたら、そこでスクロールが停止するようにしたいのです。（映画のエンディングクレジットみたいに、下からだら～っと出て、最後の映画会社のマークで画面が止まる、みたいな）今の状態では、スクロールが勝手にリピートしてしまいます。 何か方法はあるでしょうか？ 今は以下のような形で動かしています。 ご回答よろしくお願いいたします。 <HTML> <BODY BACKGROUND="bg2.gif" BGPROPERTIES=FIXED> <FONT size="14"> <DIV height="1800" width="900" position : absolute; visibility : hidden;> <MARQUEE direction="up" height="600" scrollamount="2"> 本文はじめ<br> ・ ・ ・ 本文<br> ・ ・ ・ 本文終わり<br> </FONT></DIV></MARQUEE> </BODY> </HTML>
- mike_nekoneko
- お礼率80% (4/5)
- ホームページ作成ソフト
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- hinatamama
- ベストアンサー率58% (70/120)
<Marquee loop="1">回数を指定する</Marquee> で、回数指定できます。もっと複雑なことは、 JavaScriptなどでも可能です。 http://www.din.or.jp/~hagi3/JavaScript/JSTips/DHTML/Marquee.htm http://javascript.eweb-design.com/0610_sc.html
関連するQ&A
- marqueeについて
ie8のxpで確認したところ、キチント動作しているのですが、 ie11のwin10では、動作がxpとは違う動きになってしまいます。 何かロジックが変更されてしまっていると思いますが、 どのあたりがおかしいかわかりますでしょうか。 宜しくお願い致します。 <marquee direction=up height=210 width=360 bgcolor=#ffd000 scrollamount=120% style="position:absolute;z-index:-3"> <marquee behavior=alternate scrollamount=20%> <font color=#18286c>■ ■<br> ■ ■<br>■ ■<br> ■ ■<br>■ ■<br> ■ ■<br>■ ■<br> ■ ■<br>■ ■<br> ■ ■<br>■ ■<br> ■ ■<br>■ ■<br> ■ ■<br></font> </marquee> </marquee> <div style="color:#FF0000;width:360;background:#18286c;filter:Chroma(color=#FF0000);position:absolute;z-index:-2"> + + + + + + + +<br> + + + + + + + +<br> + + + + + + + +<br> + + + + + + + +<br> + + + +<br> + + + + + + + +<br> + + + + + + + +<br> + + + + +<br> + + + + + + + + +<br> + + + +<br> + + + + + + + +<br> <br></div> <!-- **************************************************************************** --> <font color="#400806"> <marquee behavior="slide" scrollamount="22" scrolldelay="40">□□□■□□□□□□□□□□□■■■■□□□</marquee><br></font>
- ベストアンサー
- CSS
- overflowを使ってのスクロール
CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html>
- ベストアンサー
- CSS
- 高さを指定せずに子divにスクロールバー
お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか？ 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか？ お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> （「親divの高さ」-「他の要素の高さ」）＜「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか？無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>
- 締切済み
- CSS
- divのoverflowのスクロールバーを自動スクロールしたい
初めて質問します。 overflowのスタイル設定をしたdivに、innerHTMLで上から下にどんどん文字を 追加していくのですが、下にはスクロールされず、つまり自動スクロールされず わざわざ下にスクロール必要があります。 このdivのoverflowのスクロールバーを自動スクロールしたいのですが、 可能でしょうか？参考になる文献などがございましたら、教えてください。 msg.innerHTML=msg.innerHTML+"<font size=-1>テスト</font><br>"; これを入力するごとに繰り返しています。 divのoverflow以外にいい方法があれば、教えてください。 今はmsg.innerHTML="<font size=-1>テスト</font><br>"+msg.innerHTML; で、つまり下から上に表示して無理矢理、表示させています。 どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
- プログラムで困っています！
<html> <head> <title>サンプルプログラムI</title> <STYLE TYPE="text/css"> <!-- Body{ scrollber-3dlight-color:#000000; scrollber-arrow-color:#000000; scrollber-darkshadow-color:#ffffff; scrollber-face-color:#ea9e00; scrollber-highlight-color:#ffffff; scrollber-shadow-color:#000000; scrollber-track-color:#ffffff; }--> </STYLE> </head> <body> <font size="5"><font color="#ff0000"><marquee scrollamount="30" truespeed direction="down" height=80" loop="10000000000000000000" onmouseover=this.stop() onmouseout=this.start() width="20"> ☆<br> ★<br> ♠<br> ♣<br> ♥<br> ♦<br> </font></font color></marquee> <input type="button" value="回す"onClick="chuusenn()"><br> <input type="button" value="リセット" onClick="init()"><br> <hr size="10"> <marquee behavior="alternate" direction="up" height="50"><marquee direction="right"><strong><em> ↑の原理を利用してスロット作りたいなぁ。。。</strong></em> </marquee></marquee> <hr size="10"> <marquee behavior="alternate" direction="up" height="50"> まぁ、今回はこの程度で終わりです。 </marquee> <marquee Bgcolor="#7f7f7f"><marquee behavior="alternate"> サンプルプログラムIIをお楽しみに！（次回いつになるか知んねぇケド </marquee> </body> </html> このプログラムはスロット形式なのですが、横に3つ記号が回るようにしようとしたら、どうしても縦になってしまってうまくいきません。どこにどういうタグを入れたらできますか？ あと、「ストップ」というボタンを付けたいのですが・・・
- ベストアンサー
- JavaScript
- どこに挿入？
<html> <head> <title>サンプルプログラムI</title> <STYLE TYPE="text/css"> <!-- Body{ scrollber-3dlight-color:#000000; scrollber-arrow-color:#000000; scrollber-darkshadow-color:#ffffff; scrollber-face-color:#ea9e00; scrollber-highlight-color:#ffffff; scrollber-shadow-color:#000000; scrollber-track-color:#ffffff; }--> </STYLE> </head> <body> <font size="5"><font color="#ff0000"><marquee scrollamount="30" truespeed direction="down" height=80" loop="10000000000000000000" onmouseover=this.stop() onmouseout=this.start() width="20"> ☆<br> ★<br> ♠<br> ♣<br> ♥<br> ♦<br> </font></font color></marquee> <input type="button" value="回す"onClick="chuusenn()"><br> <input type="button" value="リセット" onClick="init()"><br> <hr size="10"> <marquee behavior="alternate" direction="up" height="50"><marquee direction="right"><strong><em> ↑の原理を利用してスロット作りたいなぁ。。。</strong></em> </marquee></marquee> <hr size="10"> <marquee behavior="alternate" direction="up" height="50"> まぁ、今回はこの程度で終わりです。 </marquee> <marquee Bgcolor="#7f7f7f"><marquee behavior="alternate"> サンプルプログラムIIをお楽しみに！（次回いつになるか知んねぇケド </marquee> </body> </html> このプログラムはスロット形式なのですが、横に3つ記号が回るようにしようとしたら、どうしても縦になってしまってうまくいきません。どこにどういうタグを入れたらできますか？ あと、「ストップ」というボタンを付けたいのですが・・・
- ベストアンサー
- JavaScript
- スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 ＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- スムーズにスクロールできるスプリクトが作動しません
初めて質問させていただきます。 ページ内にスタイルシートを使ってスクロールしても動かない案内板のようなボックスを作り、その中でページの上部に戻る際、スルスルとスクロールするjavascriptを入れたいのですが、うまく作動しません。 <script type="text/javascript" src="○○.js" charset="utf-8"></script> <STYLE type="text/css"> <!-- html{ height:100%; overflow:hidden; } body{ height:100%; margin:0px auto; } #sub{ width:100px; position:absolute; bottom: 0px; right: 0px; z-index:100; } div#main{ width:100%; height:100%; overflow:auto; } --> </STYLE> </HEAD> <BODY> <DIV id="sub"><A href="○○">あいうえお</A><BR><A href="○○">かきくけこ</A><BR><a href="#top">上へ</A></DIV> <DIV id="main"> <A name="top"></A><BR> ・・・略 </div> </body> 普通のbody内でリンクを指定すると、問題なくスプリクトが作動します。 なぜ、div内では作動しないのでしょうか？ いろいろ調べてみましたが、どうしても分からず、こうして質問させていただきました。 原因がわかる方がいらっしゃいましたら、どうか教えてくださいますようお願いいたします。
- ベストアンサー
- JavaScript
- DIV要素の高さ100%で、スクロールバーを表示させたいです
ソースは以下のとおりです。 DIV要素をheight:100%にして画面全体に広げるために、色々CSSで設定していましたところ、Firefoxでしたら縦スクロールバーが表示されるのですが、IE6では縦スクロールバーが表示されません。（左カラムの文字はかなり下まで続いています） IEでもスクロールバーが表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:'Georgia', Verdana, Osaka, 'MS P Gothic'; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定*/ #wrapper { width: 1001px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; } body > #wrapper { height:auto; } /*左カラムの設定*/ #left { width: 340px; margin: 0px; float: left; height: 100%; min-height: 100%; background-color:#FF0000; padding-bottom: 32768px; margin-bottom: -32768px; } /*右カラムの設定*/ #right { width: 660px; margin: 0px; float: right; height: 100%; min-height: 100%; border-left-width: 1px; border-left-style: dotted; border-left-color: #000; background-color:#00FF00; padding-bottom: 32768px; margin-bottom: -32768px; } --> </style> </head> <body> <div id="wrapper"> <div id="left"> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> </div> <div id="right"> aaaa </div> </div> </body> </html>
- 締切済み
- HTML
- スクロールできない
お世話になっています。 下のようなファイルによって、フレームを使ったファイルindex2.htmlを呼び出して、HP全体を真ん中寄せにしました。 するとマウスの真ん中のちょぼでスクロールできなくなってしまいました。 <body> <DIV ALIGN="center"> <iframe name="cal-iframe" src="index2.html" width="920" height="2500" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0"> </iframe> </DIV> </body> スクロールバーをドラッグアンドドロップで操作することはできるのですがちょぼで操作できるようにするには、どうすればいいでしょうか？
- ベストアンサー
- HTML
