ボタンをクリックするとtableの部分を垂直方向にスライドさせて切り替えたいのですが なかなか、うまくいきません。
こんな感じかなと思って、つくったのですが、まったく作動しません。
何をどうすればいいか分かりません。
どなたか、教えて下さい。
javascriptは少し分かるぐらいです。
よろしくお願いします。
コードは↓ 下のクリック画像だけ指定してあります。
html
<div id="main_left">
<h2>見出し</h2>
<img src="image/cicletop.jpg" width="33" height="33" /><!-- 上のクリックボタン -->
<div id="shuraider">
<table name="shuraid1" id="shuraid1">
<tr><td colspan="2">aaaaaa</td></tr>
<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr>
<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10"
onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'"
onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr>
</table>
<table name="shuraid2" id="shuraid2">
<tr><td colspan="2">aaaaaa</td></tr>
<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr>
<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10"
onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'"
onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr>
</table>
<table name="shuraid3" id="shuraid3">
<tr><td colspan="3">aaaaaa</td></tr>
<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr>
<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10"
onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'"
onclick="document.menu10.src='image/amenu.gif'" /></td>
<td>aaaaaaaaaaaaaa</td></tr>
</table>
<table name="shuraid4" id="shuraid4">
<tr><td colspan="2">aaaaaa</td></tr>
<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</tr>
<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10"
onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'"
onclick="document.menu10.src='image/amenu.gif'" /></td>
<td>aaaaaaaaaaaaaa</td></tr>
</table>
</div><!-- end shuraider -->
<img src="image/ciclebottom.jpg" width="33" height="33" name="shuraid_botton" id="shuraid_botton" onclick="shuraido
()" /><!-- 下のクッリックボタンでここをクリックするとtableを切り替えたい -->
</div><!-- end main_left -->
ここからcss
#main_left{
width: 339px;
}
#main_left h2{
font-size: 18px;
font-weight: bold;
color: #ffffff;
width: 339px;
line-height: 2em;
letter-spacing: 1em;
background-image: url(../image/h2.jpg);
background-color: #0F9;
margin: 0;
}
#shuraider{
width: 337px;
height: 120px;
overflow: hidden;
}
ここからjavascript
var i=1;
function shuraido(){
if(i==1){
document.src="shuraid2";
i=2;
}
else if(i==2){
document.src="shuraid3";
i=3;
}
else if(i==3){
document.src="shuraid4";
i=4;
}
else{
document.src="shuraid1";
i=1;
}
}
</script>
No.6ベストアンサー
- 回答日時:
>水平にスクロールさせる場合はどうすればよろしいでしょうか?
要領は同じです。縦になっていたものを横に考えればよいだけです。
具体的には、
・表示要素(パネルの部分)を横並びにしておく
・要素の表示位置を上下に移動(top)していたものを、左右(left)で制御する
でほとんどいけると思います。
あとは要素の高さで計算していたものは、当然ながら、幅で計算するというくらいでしょうか。
No.4
- 回答日時:
#1、#3です。
>html内に<p onload="~()"> </p>
>で出来るでしょうか?
『<p onload="~()"> </p>』という記述方法は知りませんが、window.onloadやbodyタグのonload、あるいはaddEventListenernなどを利用して実行すれば可能です。
ご回答ありがとうございます。
body.onloadとwindows.onloadを試しても、出来ませんでした。
addEventListenern はどのように入力してどのように、使えばいいでしょうか?
No.3
- 回答日時:
#1です。
>教えて頂いたコードでスクロールさせる早さは調節出来るでしょうか?
あくまでも仕組みのサンプルなので調節し易くは作ってありませんが、もちろん可能です。
アニメーションはパラパラ漫画と同じ仕組みなので、「1回表示するごとに進む量」と「表示を入替える間隔」で調節できます。
アニメーション(=スライド)させている部分は、スクリプトの真ん中あたりの
slide.id = setInterval(function(){~~ ですが、
「1回表示するごとに進む量」に該当する部分は、その直前の
def = end>top?2:-2;
で、単位はピクセルです。
現在は1回で2ピクセル移動するようにしています。
「表示を入替える間隔」にあたる部分は、少し下の
}, 15);
の部分で、単位はmsec(千分の一秒)です。
現在は15/1000秒ごとに表示を入替えるようにしています。
この数字はあまり小さくしても処理必要な時間などもあるので正確にその通りになるとは限りません。
この回答への補足
最後の質問なのですが、下のjavascriptを外部ファイルから読み込みしたいのですが、その場合はhead内でリンクさせ。
html内に<p onload="~()"> </p>
で出来るでしょうか?
No.2
- 回答日時:
No.1
- 回答日時:
回答がないみたいなので…
方法はいろいろあるでしょうが、表示する部分を { overflow:hidden; } などで限定しておいて、その中で縦に連続して表示されている要素の表示位置を上下にずらしてあげるのが簡単かも。
以下に、原理的なサンプルを。
表示枠に当たる部分が<div class="slide_panel">で、<ul id="panels">の表示位置を上下することでスライドしています。
ライブラリ(jqueryとか)を使えば、もっと簡略化した記述にできることでしょう。
(サンプルなので、対象のidとかは決め打ちになっています)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#wrapper, #wrapper *{ padding:0; margin:0; }
#wrapper{ width: 340px; text-align:center; border:1px solid #aaa; }
#wrapper h2{ font-size:18px; color:#fff; line-height:2em; background-color:#0f9; }
#slide_up, #slide_down { width:1.8em; height:1.8em; }
.slide_panel, #panels li.panel { width:340px; height:120px; text-align:left; }
.slide_panel { position:relative; overflow: hidden; }
#panels, #panels li.panel { list-style-type:none; }
#panels { position:absolute; }
#panels li.panel { overflow:auto; }
</style>
</head>
<body>
<div id="wrapper" onclick="slidePanel(event)">
<h2>見出し</h2>
<button type="button" id="slide_up">↑</button>
<div class="slide_panel">
<ul id="panels">
<li class="panel">内容1</li>
<li class="panel">
内容2-1<br>内容2-2<br>内容2-3<br>内容2-4<br>
内容2-5<br>内容2-6<br>内容2-7<br>内容2-8
</li>
<li class="panel">内容3</li>
<li class="panel">内容4</li>
<li class="panel">内容5</li>
<li class="panel">内容6</li>
</ul>
</div>
<button type="button" id="slide_down">↓</button>
</div>
<script type="text/javascript">
<!--
var slidePanel = function(evt){
var t = evt.target || evt.srcElement;
var def, index, slide = slidePanel;
def = t.id=="slide_up"?-1:t.id=="slide_down"?1:0;
index = slide.index + def;
if(def==0 || slide.n==0 || 0>index || index>=slide.n) return;
slide.index = index;
if(slide.id) clearInterval(slide.id);
var s = slide.style, end = -slide.elms[index].offsetTop;
var top = parseInt(s.top);
def = end>top?2:-2;
slide.id = setInterval(function(){
top += def;
var flag = (def>0 && top>=end) || (0>def && end>=top);
s.top = (flag?end:top) + "px";
if(flag){
clearInterval(slide.id);
slide.id = null;
}
}, 15);
}
slidePanel.init = function(){
var i, elm, e, c, t = this;
t.elms = [], t.index = 0, t.id = null;
elm = document.getElementById("panels");
if(!elm) return;
t.style = elm.style;
t.style.top = "0px";
elm = elm.childNodes;
for(i=0; e=elm[i++];)
if((c=e.className) && c.match(/\bpanel\b/))
t.elms.push(e);
t.n = t.elms.length;
}
slidePanel.init();
//-->
</script>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JQueryでテーブルの行を追加し...
-
プルダウンメニューを表の中に...
-
クリックごとに文字色が交互に...
-
テキストエリアに入力した改行...
-
value内に変数を入れたい
-
onclickで2個指定するには?
-
submitした値を返したい
-
javaScriptの変数をJavaの変数...
-
二つの入力欄に、同時に同じ文...
-
return trueとreturn falseの用...
-
JavaScriptのfileオブジェクト...
-
COBOLの数字チェック
-
【jQuery】input nameの文字列...
-
プルダウン 項目が多いので先頭...
-
テーブルの変数について
-
プルダウン選択を変更すると、...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
setIntervalの間隔を途中で変更...
-
ラジオボタンのチェックが外れ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
プルダウンメニューを表の中に...
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
テーブルの行数を可変長にした...
-
半透明のテーブル
-
このjavascriptがわかりません
-
javascriptのカルーセル
-
javascriptで<table>背景色の取得
-
jquery にて、アラートダイアロ...
-
javascriptで表に画像を貼る
-
任意に文字数指定のできる原稿...
-
文字を隠すゲーム
-
onMouseでbackgroundの画像を変...
-
テーブルのセルのクリック時、...
-
テーブルの生成
-
idの振り直しについて
-
<iframe>内にHTMLをランダム表...
おすすめ情報