- 締切済み
フレームと横スクロールを使ったサイト
こんにちは。質問お願いします。 今、http://youmos.com/reference/smooth_scroll.htmlのサイト様のような スクロールを使ったサイトを作りたいと思っています。 内容は、上下に分かれたフレームで 上はメニュー、下はコンテンツ、 メニューのボタンを押すと、下のコンテンツが横スクロールして 表示されるというものです。 検索したのですが、いまいちわかりませんでした。 HPについて詳しい方！回答をお待ちしております＞＜
- 69KASUMI69
- お礼率15% (8/51)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- N_A_O
- ベストアンサー率66% (37/56)
http://www.soup-web.net/ こんな感じでよければ、下記参照。 <frameset rows="200,*" > <frame src="menu.html" name="menu"> <frame src="content.html" name="content"> </frameset> menu.html <body bgcolor="#ffff00"> <a href="#1" onClick="parent.content.scrollPageTo(0,0)">left</a> <a href="#1" onClick="parent.content.scrollPageTo(1600,0)">menu1</a> <a href="#2" onClick="parent.content.scrollPageTo(2600,0)">menu2</a> content.html <script> var isIE = 0; if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {isIE = 1;} function scrollPageMath(start_x,end_x,start_y,end_y){ var distance_x; var distance_y; var move_x; var move_y; var set_x; var set_y; distance_x = (end_x - start_x)/20; // 動かすx幅の比率 if(distance_x > 0)set_x = Math.ceil(distance_x); else set_x = Math.floor(distance_x) ; distance_y = (end_y - start_y)/20 ; // 動かすy幅の比率 if(distance_y > 0)set_y = Math.ceil(distance_y); else set_y = Math.floor(distance_y); move_x = start_x + set_x; move_y = start_y + set_y; if (set_x > 0 && move_x <= end_x || set_y > 0 && move_y <= end_y || set_x < 0 && move_x >= end_x || set_y < 0 && move_y >= end_y){ scroll(move_x,move_y) start_x += set_x; start_y += set_y; setTimeout("scrollPageMath("+start_x+","+end_x+","+start_y+","+end_y+")",1); } else return true; } function scrollPageOffset(go){ if (go=="go_x")return (document.getElementById) ? document.body.scrollLeft:pageXOffset; if (go=="go_y")return (document.getElementById) ? document.body.scrollTop:pageYOffset; } function scrollPageTo(end_x,end_y){ var start_x = scrollPageOffset("go_x"); var start_y = scrollPageOffset("go_y"); scrollPageMath(start_x,end_x,start_y,end_y); } </script> <body bgcolor="#ff00ff"> <div id="top" style="position:absolute;top:10; left:100px;">left</div> <div id="menu1" style="position:absolute;top:10; left:1700px;">menu1</div> <div id="menu2" style="position:absolute;top:10; left:2700px;">menu2</div> <div id="end" style="position:absolute;top:10; left:4000px;">end</div>
- usagikun2
- ベストアンサー率28% (52/182)
やはり回答が付かないようですね！ 問題点があります。 １．ホームページを何で作ろうとしてるのでしょうか？ ホームページビルダーで作るのであれは、フレーム雛形から制作出来ますが、ただし、最近はフレームページは利用する側にとっても管理する側にとっても不都合な面が有るのであまり人気が無いように思います。 ２．横スクロール 上記サイトは上下スクロールですが、横スクロールにしたいのですね？ 一般的に横スクロールをされてるサイトが少ないので、利用者側から言わせると、不慣れで使いずらいサイトになります。 ３．上記サイトは、ジャバスクリプトを使用したスクロールですが、ジャバにもバージョンがあり利用者が古いバージョンだと動かなかったり、又は、ジャバ無効にしてる方も居られるので、広く一般の方にご利用されないサイトになる可能性が出て来ます、又は、そうした、無効にされている方向けの対策が必要になります。
