http://bunjin.com/java/link_list.html
このスクリプトで質問があるんですが
このリストを何列か縦に並べることってできますか?
その時、間はあけたくないんですが
上のリストをクリックすると下のが下がり
メニューが現れるという感じなんですが。
自分はフレーム縦2分割の
ページなんですが
そのメニューをクリックするとどうしても
新しいウインドウで開いてしまうんですよ
フレームページの左側で選んで
右側に表示させたいんですが・・・・。
自分はJavaあまり詳しくないので
やり方を具体的に教えてくださると助かります。
わかりにくかったら補足します。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

・レイアウト変更について


HTMLを変更すれば可能です。
例えばBODYの内容を

<a id="menu1" href="#"><font size="+1">検索エンジン</font></a><br>
<div id="sub1">
<a href="http://www.google.co.jp/">Google</a><br>
<a href="http://www.yahoo.co.jp/">Yahoo</a><br>
<a href="http://www.goo.ne.jp/">Goo</a><br>
</div>

<a id="menu2" href="#"><font size="+1">WWW</font></a><br>
<div id="sub2">
<a href="http://www.w3.org/">W3C</a><br>
</div>

<a id="menu3" href="#"><font size="+1">その他</font></a><br>
<div id="sub3">
<a href="http://www.microsoft.com/">Microsoft</a><br>
<a href="http://java.sun.com/">Java(SUN)</a><br>
</div>

のようにすれば間が空かなくなります。
HTML、スタイルシートで可能なレイアウト変更は全て対応しているはずです。
(対応していないのは、javascriptでのonclickイベントだけです)
(onclickに対応させることもできますが、面倒なので書いていません)

> サブメニューは画像でも機能すると書いてありますが
> メニューを画像ファイルにすることはできますか?
可能です。IMGタグにidを指定してください。
    • good
    • 0
この回答へのお礼

zzzzzzさん本当に助かりました。
どうもありがとうございました。
↓私のHPです、こんな感じで使わせていただきました。http://www.geocities.co.jp/Playtown-Rook/3945/

お礼日時:2002/03/23 00:03

それでは使用法を書いておきます。


function init() {
の前に記述されているJavascriptに関しては変更しないでください。
(javascript部分はほとんど変更しないように作ってあります)

以下では、「Menu_List (ココをクリック)」に相当するものを「メニュー」、
メニューをクリックしたときに開くものを「サブメニュー」と呼ぶことにします。

1.HTMLの準備
サブメニューをすべて同時に開いた時の表示になるようにHTMLを書いてください。
下の例をJavascriptを切って閲覧していただけば大体の感じが分かると思います。

2.HTMLの修正
メニューとサブメニューに名前を付けます。
それぞれのタグ内に
id="menu"
という記述を追加してください。但し、"menu"は各タグごとに変えてください。
(異なるタグは異なるidを持つようにしてください)
下の例の<body>タグ以下を見ていただければ感じが掴めるかと思います。
下の例では、メニューのidに"menu1", "menu2", "menu3"という名前を付け、
サブメニューのidに"sub1", "sub2", "sub3"という名前を付けています。

3.Javascriptの修正
// ********* ここにサブメニューの記述を追加してください。**********
と書いてある行の直後に、
mc.append(<メニューのID>, <サブメニューのID>);
という行を、メニューとそのサブメニューの組の個数分だけ記述してください。
(元から書いてあるmc.append()の行は削除してください)
ここで、<メニューのID>および<サブメニューのID>は2.で決めたものを「"」でくくって書いてください。
例えば、2.までで
<span id="newmenu">新しいメニュー</span>
<div id="newsubmenu">このメニューに対応するサブメニュー</div>
というようにHTMLを書いていたならば、
mc.append("newmenu", "newsubmenu");
という行を追加してください。

以上です。

idをきちんとつける限り、HTMLには何を書いてもかまいません。
サブメニューの内容がリンクだろうと画像だろうと正しく機能します。
表示制御以外を全て通常のHTMLとして書けるようにしていますので、
右側フレームにリンク先を表示する、という件に関しては、
<a href="content.html" target="right">
のようにすればOKです。

不明なことがありましたら補足いたします。

この回答への補足

その通りにやったら
項目を増やすことができました。

しかし一つ聞きたいのですが
サブメニューをもう少し左に
寄せることはできませんか?後、メニューと
の間ももう少しなくしてほしいのですが・・・。
フレームなのでできるだけ幅をとりたくないんです。
今から変更可能なようでしたらやり方を
教えてくれませんか?

後もう一つ
サブメニューは画像でも機能すると書いてありますが
メニューを画像ファイルにすることはできますか?

補足日時:2002/03/22 01:22
    • good
    • 0

> 「識別子がありません」


フレームの名前が間違っているか、あるいは変数名のうつし間違いだと思います。

> 確認ですが<>はいらないんですよね?
はい。フレーム名がrightなら
top.right.location.href = "http://" + url;
hideMenu(act_mnu);
top.right.focus();
と記述します。スペースは空けても空けなくてもかまいません。
但し、全角スペースは入れないでください。


縦に並べる、という話に移ります。
挙げられていたページの方法では、縦に並べた場合に表示間隔が開いてしまう、という問題があります。
(このページの方法は、サブメニューを静的に作成しておき、クリックで表示/非表示を切り替える、という方法をとっているため)
これを回避するために、全く別の方法でスクリプトを書いてみました。
(但しNetscape4以前ではうまく動作しないと思われますが、挙げられていたページのスクリプトの方もNetscape非対応の書き方がされています)
コピー&ペーストして動きを見てみてください。
使う気がおありでしたら使用法を書きますので。

<HTML>
<HEAD>
<SCRIPT>
<!--
function __declare_Menu() {
function window.Menu(parent, submenu) {
this.isHidden = false;
this.parentId = parent;
this.parentRef = document.getElementById(parent);
this.alterNode = document.createElement("DIV");
this.menuId = submenu;
this.menuRef = document.getElementById(submenu);
this.prevParentOnclickHandler = null;
};
new Menu("", "");
Menu.prototype.alterOnclickHandler = function(newHandler) {
if (this.parentRef != null) {
if ((this.parentRef.onclick) && (this.prevParentOnclickHandler == null)) {
this.prevParentOnclickHandler = this.parentRef.onclick;
}
this.parentRef.onclick = newHandler;
return true;
}
return false;
};
Menu.prototype.restoreOnclickHandler = function() {
if (this.parentRef != null) {
if (this.prevParentOnclickHandler != null) {
this.parentRef.onclick = this.prevParentOnclickHandler;
this.prevParentOnclickHandler = null;
} else {
this.parentRef.onclick = null;
}
return true;
}
return false;
}
Menu.prototype.showMenu = function() {
if (this.isHidden) {
this.alterNode.parentNode.replaceChild(this.menuRef, this.alterNode);
this.isHidden = false;
}
};
Menu.prototype.hideMenu = function() {
if (!this.isHidden) {
this.menuRef.parentNode.replaceChild(this.alterNode, this.menuRef);
this.isHidden = true;
}
};
Menu.prototype.toString = function() {
return this.parentId + ", " + this.menuId;
};
} __declare_Menu();

function __declare_MenuCollection() {
function window.MenuCollection() {
this.aaa = "erere";
this.current = null;
this.elements = new Object();
}
new MenuCollection();
MenuCollection.prototype.append = function(parent, submenu) {
this.elements[parent] = new Menu(parent, submenu);
this.elements[parent].parentRef.mcObject = this;
this.elements[parent].alterOnclickHandler(new Function("", "this.mcObject.onclickHandler(this.id); return false;"));
};
MenuCollection.prototype.remove = function(parent) {
if (this.elements[parent] !== void(0)) {
this.elements[parent].hideMenu();
this.elements[parent].restoreOnclickHandler();
this.elements[parent].parentRef.mcObject = null;
var tmp = this.elements;
delete tmp[parent];
return true;
} else {
return false;
}
};
MenuCollection.prototype.removeAll = function() {
for (var menu in this.elements) {
this.remove(menu);
}
this.elements = null;
};
MenuCollection.prototype.hideAll = function() {
for (var menu in this.elements) {
this.elements[menu].hideMenu();
}
this.current = null;
};
MenuCollection.prototype.select = function(parent) {
this.elements[parent].showMenu();
this.current = parent;
};
MenuCollection.prototype.onclickHandler = function(id) {
if (this.current == id) {
this.hideAll();
} else {
this.hideAll();
this.select(id);
}
};
} __declare_MenuCollection();

function init() {
mc = new MenuCollection();
mc.append("menu1", "sub1");
mc.append("menu2", "sub2");
mc.append("menu3", "sub3");
// ********* ここにサブメニューの記述を追加してください。**********
mc.hideAll();
}
-->
</SCRIPT>
</head>
<body onload="init()" onunload="mc.removeAll()">

<a id="menu1" href="#"><font size="+1">検索エンジン</font></a><br>
<div id="sub1">
<ul>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo</a></li>
<li><a href="http://www.goo.ne.jp/">Goo</a></li>
</ul>
</div>

<a id="menu2" href="#"><font size="+1">WWW</font></a><br>
<div id="sub2">
<ul>
<li><a href="http://www.w3.org/">W3C</a></li>
</ul>
</div>

<a id="menu3" href="#"><font size="+1">その他</font></a><br>
<div id="sub3">
<ul>
<li><a href="http://www.microsoft.com/">Microsoft</a></li>
<li><a href="http://java.sun.com/">Java(SUN)</a></li>
</ul>
</div>

</body>
</html>

この回答への補足

わざわざありがとうございます。
エラーもなく正常に動いています。
これを是非使いたいと思います!
使用法、よろしくお願いします。

補足日時:2002/03/21 22:25
    • good
    • 0

「縦に並べる」という部分の意味がよく分からないので補足をお願いします。


「Menu_List (ココをクリック)」に該当するものを縦に並べる、ということでしょうか。
(もしそうであればDHTMLを使用することになると思います)

表示先をポップアップウィンドゥではなく、右側フレームにしたい、ということに関しては、
popup = window.open("http://"+url,"MenuPopup",win_param);
hideMenu(act_mnu);
popup.focus()
の部分を
top.<frame1>.location.href = "http://"+url;
hideMenu(act_mnu);
top.<frame1>.focus();
とすればできます。
ここで、<frame1>の部分には右側フレームの名前を記入してください。
例えば、右側フレームを
<frame src="content.html" name="bodyframe">
のように定義しているのなら、1行目は
top.bodyframe.location.href = "http://"+url;
とします。

この回答への補足

右側フレームに表示はなんとかできました。
しかし「行183」「識別子がありません」とエラーが
でてしまいます。183行目(修正したところです)
に間違いがあるらしいのですがどうしていいか
わからないです・・・。そのエラーがでると修正前の
popup = window.open("http://"+url,"MenuPopup",win_param);
hideMenu(act_mnu);
popup.focus()
に戻ってしまうんですよ。
確認ですが<>はいらないんですよね?勝手に修正されて<right(フレーム名)>になってます・・・。
後、半角2マスはあける必要があるのですか?

縦に並べるはその通りです。これについても
教えていただけると助かります^^;

補足日時:2002/03/21 00:56
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q【プルダウンメニュー】フレームの中のインラインフレームに、ターゲットを指定するには?

現状は【フレームA(ヘッダー1)】【フレームB(ヘッダー2)】【フレームC(メイン)】【フレームD(フッター)】の4分割のうえに、更にフレームCの中に【インラインフレーム】があります。

フレーム3の中にプルダウンメニューを設置し、インラインフレームに表示させたいのですが上手く動作しません。

※ちなみに、「var target = "フレームA名";」で試してみると動作はするのですが…。
という事は「フレームの中のインラインフレーム」という点がネックなのでしょうか?

とあるソースを改良して使おうと思ったのですが、javascript素人につき行き詰まっています。どなたか回答いただけると嬉しいです。


<SCRIPT TYPE="text/javascript">
<!--

var target = "インラインフレーム名";

function jump(){
var url = document.form1.select.options[document.form1.select.selectedIndex].value;
if(url != "" ){
if(target == 'top'){
top.location.href = url;
}
else if(target == 'blank'){
window.open(url, 'window_name');
}
else if(target != ""){
eval('parent.' + target + '.location.href = url');
}
else{
location.href = url;
}

}

}

// -->
</SCRIPT>


<FORM NAME="form1">
<SELECT NAME="select" onChange="jump()">
<option value="">お選びください
<option value="Ahtml/arr">AAA
<option value="B.html">BBB
<option value="C.html">CCC
<option value="D.html">DDD
<option value="E.html">EEE

</SELECT>
</FORM>

現状は【フレームA(ヘッダー1)】【フレームB(ヘッダー2)】【フレームC(メイン)】【フレームD(フッター)】の4分割のうえに、更にフレームCの中に【インラインフレーム】があります。

フレーム3の中にプルダウンメニューを設置し、インラインフレームに表示させたいのですが上手く動作しません。

※ちなみに、「var target = "フレームA名";」で試してみると動作はするのですが…。
という事は「フレームの中のインラインフレーム」という点がネックなのでしょうか?

とあるソースを改良して使おう...続きを読む

Aベストアンサー

- - arrival.html - -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function jump(){
var url=document.form1.select1.options[form1.select1.selectedIndex].value;
if (url!="") document.arr.location.href = url;
}
</script>
</head>
<body>
<iframe name="arr"></iframe>
<FORM NAME="form1">
<SELECT NAME="select1" onChange="jump()">
<option value="">お選びください
<option value="aaa.html">AAA
<option value="bbb.html">BBB
</SELECT>
</FORM>
</body>
</html>

- - arrival.html - -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function jump(){
var url=document.form1.select1.options[form1.select1.selectedIndex].value;
if (url!="") document.arr.location.href = url;
}
</script>
</head>
<body>
<if...続きを読む

Qフレームの縦スクロール

フレームを使ったページの縦スクロールをさせる方法を教えて下さい。

dir1.htmのソース

<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="900pt,900pt">
<FRAME SRC="dir2no1.htm">
<FRAME SRC="dir2no2.htm">
</FRAMESET>
</HTML>


dir2no1.htmのソース

<HTML>
<HEAD></HEAD>
<BODY>
あああ
</BODY>
</HTML>


dir2no2.htmのソース

<HTML>
<HEAD></HEAD>
<BODY>
いいい
</BODY>
</HTML>


この3つのファイルで、dir1をIEで表示した時に、右に縦スクロールバーを表示したいです。
<FRAME SRC="dir2no1.htm">

<FRAME SRC="dir2no2.htm">
のそれぞれをスクロールさせるのではなく、dir1.htmそのものに縦スクロールを付けたいのです。

実際にはdir1.htmはフレームの子供であり、縦サイズは固定値500です。
<FRAME SRC="dir2no1.htm">

<FRAME SRC="dir2no2.htm">
の縦サイズは固定値です。ぞれぞれ900ぐらいにしてテストしたいです。
テストではdir1.htmの親フレームは付けずに、IEで直接dir1.htmにアクセスしてスクロールバーが使えることを確認したいです。
900,900の子供を持った500の親だから、親に縦スクロールを付けたいのです。
JavaScripは使えます。
<iframe>を使わないことが条件です。

フレームを使ったページの縦スクロールをさせる方法を教えて下さい。

dir1.htmのソース

<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="900pt,900pt">
<FRAME SRC="dir2no1.htm">
<FRAME SRC="dir2no2.htm">
</FRAMESET>
</HTML>


dir2no1.htmのソース

<HTML>
<HEAD></HEAD>
<BODY>
あああ
</BODY>
</HTML>


dir2no2.htmのソース

<HTML>
<HEAD></HEAD>
<BODY>
いいい
</BODY>
</HTML>


この3つのファイルで、dir1をIEで表示した時に、右に縦スクロールバーを表示したいで...続きを読む

Aベストアンサー

なんとなくできましたので回答します。
でもこれいいのかは全く自信なしです。
まずファイルをひとつ追加しました。
dir0.htm とします。

[dir0.htm]
<HTML>
<FRAMESET ROWS="100%" style="overflow:scroll">
<FRAME SRC="dir1.htm" style="height:1800">
</FRAMESET>
</HTML>

そして dir1.htm を修正しました。

[dir1.htm]
<HTML>
<FRAMESET rows="*,*" style="height:1800">
<FRAME SRC="dir2no1.htm" style="height:900">
<FRAME SRC="dir2no2.htm" style="height:900">
</FRAMESET>
</HTML>

その他のファイルについては変更はありません。
IE以外のブラウザで試していませんのでご了承くださいませ。

Q固定ナビのJqueryのアコーディオンメニューの項目をクリックした際にメニューを閉じたい。

JavaScript、初心者のものです。
今回、スマホサイトでjQueryのアコーディオンメニュー(ページ内リンク)を使用しているのですが、ヘッダー(ナビ)部分を固定にしています。
現状ではクリックするとメニューはうまく開くのですが、各項目をクリックすると、リンク箇所にリンクはされるのですが、メニューが開いたままになってしまいます。
メニューボタンをクリックするとメニューは閉じます。

これを各項目をクリックした際にメニューが自動で閉じるのにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。
(※ヘッダー部分を固定にする前は、きちんと閉じていました。)


以下ソースを載せておきます。

【JS】
$(function(){
$("#toggle").on("click", function() {
$("#mainnavi").slideToggle();
});
});

$(function(){
$("#mainnavi ul li p, #sidenavi ul li p").click(function(){
$(this).next("ul").slideToggle();
$(this).children("span").toggleClass("open");
});
});


【HTML】
<header>
<div id="header" class="clearfix">
<div class="container clearfix">
<div class="float_left_head">
<h1></h1>
<div class="header_logo"><a href="./"><img src="img/logo_pc.png" alt="" class="img_change img-responsive"></a></div>
</div>
<ul class="header_contact">
<li><img src="img/tell_pc.png" alt=""></li>
<li id="toggle"><img src="img/toggle.png" alt="" width="40" height="40"></li>
</ul>
</div>
</div>
<!-- mainnavi -->
<nav id="mainnavi">
<div class="container">
<ul>
<li class="scroll"><a href="#about">ああああ</a></li>
<li class="scroll"><a href="#flow">ああああ</a></li>
<li class="scroll"><a href="#feature">ああああ</a></li>
<li class="scroll"><a href="#results">ああああ</a></li>
<li class="scroll"><a href="#voice">ああああ</a></li>
<li class="scroll"><a href="#faq">ああああ</a></li>
<li class="scroll"><a href="#intro">ああああ</a></li>
</ul>
</div>
</nav>
</header>


【CSS】
header{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
z-index: 999;
height: 80px;
}

JavaScript、初心者のものです。
今回、スマホサイトでjQueryのアコーディオンメニュー(ページ内リンク)を使用しているのですが、ヘッダー(ナビ)部分を固定にしています。
現状ではクリックするとメニューはうまく開くのですが、各項目をクリックすると、リンク箇所にリンクはされるのですが、メニューが開いたままになってしまいます。
メニューボタンをクリックするとメニューは閉じます。

これを各項目をクリックした際にメニューが自動で閉じるのにはどうすればよいのでしょうか?
お手数ですが、...続きを読む

Aベストアンサー

確認しました。
common.jsの46行目から51行目の
$(function(){
$(".scroll a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});
これが犯人な気がします。
;が足りないのと、移動先の取得に不備があるので、スマホのブラウザだと動かなくなる。。。おそらく

$(function(){
$('.scroll a[href^=#]').click(function() {
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, 'slow', 'swing');
return false;
});
});

これに書き換えて、ダメだったらお手上げです。
一応、この違いで私もサンプルファイル作ってテストしてみたのですが、
前者のソースだとPC画面からは動くけど、スマホだとダメでした。

ただ怖いので、書き換え前のファイルはバックアップとってからためしてください。

確認しました。
common.jsの46行目から51行目の
$(function(){
$(".scroll a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});
これが犯人な気がします。
;が足りないのと、移動先の取得に不備があるので、スマホのブラウザだと動かなくなる。。。おそらく

$(function(){
$('.scroll a[href^=#]').click(function() {
// アンカーの値取得
var href= $(this).attr("href");
...続きを読む

Qインラインフレームで組まれたHTMLで子フレームより、親フレームのUR

インラインフレームで組まれたHTMLで子フレームより、親フレームのURLを参照したいです。
parent.locationで参照出来ることは、わかったのですが、サイトの制御がかかっているようで
これは、使えないようです。

サイトは、楽天です。

他に何か方法があればと思うのですが、
ご教授のほど、お願い致します。

Aベストアンサー

楽天に限らず、javascriptで他のサイトのコンテンツにアクセスする事は出来ません。
<iframe>でも<frameset>でもajaxでも不可能です。
どうしても、自サイト内に別途代理応答的な動きをするプログラムが必要です。
楽天の何を取得したいのかわかりませんが、RSS Feedみたいな特定のXMLなら
アクセス用のAPIサービスを提供しているサイトもありますが...
http://code.google.com/intl/ja/apis/ajax/documentation/
http://code.google.com/intl/ja/apis/ajaxlanguage/documentation/
http://developer.yahoo.co.jp/
http://pipes.yahoo.com/poolmmjp/feed_api
http://www.ajax-cross-domain.com/

QJavaスクリプトで画像を縦にスクロールさせたいです。

Javaスクリプトで画像を縦にスクロールさせたいです。

お世話になります。
ホームページに、流れる画像(リンク付き、複数)を使用したいと思い、
検索したところ以下の参考サイトを見つけました。
http://myako.net/java4/asan/nagare.html
こちらでは横スクロールは紹介されているのですが、
それを縦にスクロールさせたいと思い調べてみたものの
恥ずかしながら初心者なものでさっぱり判りません。

どうかアドバイスをください。
よろしくお願いします。

Aベストアンサー

お待たせしました。完成しました。(回答削除されたみたいなので)
リスト要素をぐるぐるスクロール表示です。
オブジェクト指向です。CSS定義は入りません。
スクロール表示場所は幅と高さを指定して生成します。
スクロール速度も設定できます。
使い方
var my_Scroll_Div = new Scroll_Div(document.getElementById("gazoulist"));
でスクロールしたいリスト要素(ulとかol)のIDを渡します。
my_Scroll_Div.init(250,100,'left');
でスクロール表示場所の高さと幅と回り込みを指定します。
my_Scroll_Div.scroll_timer(10,300);
で、スクロール刻み(ピクセル)とインターバル(ミリ秒)を指定します。
クラスオブジェクトはこれです。

function Scroll_Div(elm){
this.elm=elm;
this.elm_id=elm.id;
this.contener;
this.scroll_height;
this.scroll_count;
this.timer;
this.gazou_height=elm.offsetHeight;
elm.style.position='absolute';
elm.style.padding='0px';
elm.style.margin='0px';
elm.style.listStyle='none';
elm.style.top='0px';
var ul_len=elm.childNodes.length;
for(var i=0;i<ul_len;i++){
if(elm.childNodes[i].nodeName=="LI"){
elm.appendChild(elm.childNodes[i].cloneNode(true));
}
}
this.init=function(height,width,floating){
var contener=document.createElement("div");
contener.id="my_contener";
contener.style.position='relative';
contener.style.height=height+'px';
contener.style.width=width+'px';
contener.style.overflow='hidden';
contener.style.styleFloat=floating;
contener.style.cssFloat=floating;
contener.appendChild(this.elm.cloneNode(true));
document.getElementsByTagName("BODY")[0].insertBefore(contener,this.elm);
this.elm.parentNode.removeChild(this.elm);
this.contener=contener;
this.scroll_height=contener.offsetHeight;
this.scroll_count=this.scroll_height;
};
this.scroll_timer=function(step,interval){
var scroll_count=this.scroll_count;
var scroll_height=this.scroll_height;
var elm=document.getElementById(this.elm_id);
var gazou_height=this.gazou_height;
this.timer=setInterval(function(){
if(scroll_count>-gazou_height){
elm.style.top= scroll_count + "px";
scroll_count=scroll_count - parseInt(gazou_height/step);
}else{
scroll_count=scroll_height-scroll_height;
//clearInterval(timer);
}
},interval);
}
}

サンプルはこんなかんじ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>縦スクロール</title>
<script type="text/javascript" charset="utf-8">
<!--
function Scroll_Div(elm){
this.elm=elm;
this.elm_id=elm.id;
this.contener;
this.scroll_height;
this.scroll_count;
this.timer;
this.gazou_height=elm.offsetHeight;
elm.style.position='absolute';
elm.style.padding='0px';
elm.style.margin='0px';
elm.style.listStyle='none';
elm.style.top='0px';
var ul_len=elm.childNodes.length;
for(var i=0;i<ul_len;i++){
if(elm.childNodes[i].nodeName=="LI"){
elm.appendChild(elm.childNodes[i].cloneNode(true));
}
}
this.init=function(height,width,floating){
var contener=document.createElement("div");
contener.id="my_contener";
contener.style.position='relative';
contener.style.height=height+'px';
contener.style.width=width+'px';
contener.style.overflow='hidden';
contener.style.styleFloat=floating;
contener.style.cssFloat=floating;
contener.appendChild(this.elm.cloneNode(true));
document.getElementsByTagName("BODY")[0].insertBefore(contener,this.elm);
this.elm.parentNode.removeChild(this.elm);
this.contener=contener;
this.scroll_height=contener.offsetHeight;
this.scroll_count=this.scroll_height;
};
this.scroll_timer=function(step,interval){
var scroll_count=this.scroll_count;
var scroll_height=this.scroll_height;
var elm=document.getElementById(this.elm_id);
var gazou_height=this.gazou_height;
this.timer=setInterval(function(){
if(scroll_count>-gazou_height){
elm.style.top= scroll_count + "px";
scroll_count=scroll_count - parseInt(gazou_height/step);
}else{
scroll_count=scroll_height-scroll_height;
//clearInterval(timer);
}
},interval);
}
}
// -->
</script>
</head>
<body>
<ul id="gazoulist">
<li><a href="about:blank"><img src="1_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="2_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="3_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="4_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="5_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="6_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="7_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="8_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="9_s.jpg" width="75" height="75"></a></li>
<li><a href="about:blank"><img src="10_s.jpg" width="75" height="75"></a></li>
</ul>
<div>
本文
</div>
<button onclick="my_Scroll_Div.stop();">スクロール停止</button>
<button onclick="my_Scroll_Div.scroll_timer(10,300)">スクロール再開</button>
<br style="clear: both;">
<script type="text/javascript" charset="utf-8">
Scroll_Div.prototype.stop=null;
var my_Scroll_Div = new Scroll_Div(document.getElementById("gazoulist"));
my_Scroll_Div.stop=function(){clearInterval(this.timer);};
my_Scroll_Div.init(250,100,'left');
my_Scroll_Div.scroll_timer(10,300);
</script>
</body>
</html>

お待たせしました。完成しました。(回答削除されたみたいなので)
リスト要素をぐるぐるスクロール表示です。
オブジェクト指向です。CSS定義は入りません。
スクロール表示場所は幅と高さを指定して生成します。
スクロール速度も設定できます。
使い方
var my_Scroll_Div = new Scroll_Div(document.getElementById("gazoulist"));
でスクロールしたいリスト要素(ulとかol)のIDを渡します。
my_Scroll_Div.init(250,100,'left');
でスクロール表示場所の高さと幅と回り込みを指定します。
my_Scroll_...続きを読む


人気Q&Aランキング

おすすめ情報