同じページを横スクロール

質問

他にも同じ内容で質問されている方がいましたが、
http://oshiete1.goo.ne.jp/qa2872784.html

商用利用を考えているので
ライセンスを確認したところ
使えそうにありませんでした。

機能的には、
同じページ内にあるリンクボタンを押すと
指定した数値分 横に（ボタンごと）スクロールして
次に現れたボタンを押すとまた横にスクロールする…
というものが必要です。

http://www.amanojaku.net/jsmemo/hscroll.html
↑ここで紹介されているサンプルがまさに理想ですが、
これも使うことはできないので
どなたか知ご存知の方は教えていただけないでしょうか？
商用利用が可能なものをお願いします。

回答No.3

kokorone · ベストアンサー

※ボタンについて
＜オリジナル＞
<input type="button" value="→" onClick="StartMove(0)">
<input type="button" value="←" onClick="StartMove(1)">
＜カスタマイズ後＞
<a href="JavaScript:StartMove(0)">→</a>
<a href="JavaScript:StartMove(1)">←</a>
※スクロール幅について
var nSpan = 360; //等間隔でスライドするためのピクセル数です。
を変更してください。
現状では、360PXを5px刻みで移動しています。

お礼

なんとか、無事にできるようになりました。
ありがとうございました。

回答No.4

N_A_O

http://www.soup-web.net/
ここは、フレーム及びこのスクリプトを使用。
<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 start_x;
var end_x;
var start_y;
var 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)/10; // 動かすx幅の比率
if(distance_x > 0)set_x = Math.ceil(distance_x);
else set_x = Math.floor(distance_x) ;
distance_y = (end_y - start_y)/10 ; // 動かす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>

<div id="1" style="position:absolute; top:0px; left:10px; z-index:0;width:490px;height:300px;" ><br>1
<a href="#2;" onClick="scrollPageTo(500,0);">NEXT&nbsp; &gt;</a>
<br><img src="../.jpg" alt="image" width="490" height="270" title="image" /><br>
</div>
<div id="2" style="position:absolute; top:0px; left:510px; z-index:0;width:490px;height:300px;"><br>2
<a href="#1;" onClick="scrollPageTo(0,0);">&lt;&nbsp;PREV.</a>*
<a href="#3;" onClick="scrollPageTo(1000,0);">NEXT&nbsp; &gt;</a>
<br><img src="../.jpg" alt="image" width="490" height="270" title="image" /><br>
</div>
<div id="3" style="position:absolute; top:0px; left:1010px; z-index:0;width:490px;height:300px;"><br>3
<a href="#2;" onClick="scrollPageTo(500,0);">&lt;&nbsp;PREV.</a>*
<a href="#4;" onClick="scrollPageTo(1500,0);">NEXT&nbsp; &gt;</a>
<br><img src="../.jpg" alt="image" width="490" height="270" title="image" /><br>
</div>
<div id="4" style="position:absolute; top:0px; left:1510px; z-index:0;width:490px;height:300px;"><br>4
<a href="#3;" onClick="scrollPageTo(1000,0);">&lt;&nbsp;PREV.</a>*
<a href="#5;" onClick="scrollPageTo(2000,0)">NEXT&nbsp; &gt;</a>
<br><img src="../.jpg" alt="image" width="490" height="270" title="image" /><br>
</div>
<div id="5" style="position:absolute; top:0px; left:2010px; z-index:0;width:990px;height:300px;"><br>5
<a href="#1;" onClick="scrollPageTo(0,0);">&lt;&nbsp;LEFT</a>*
<a href="#4;" onClick="scrollPageTo(1500,0);">&lt;&nbsp;PREV.</a>
<br><img src="../.jpg" alt="image" width="490" height="270" title="image" /><br>
</div>

これでよければ、テーブル使ったり、ポジション変更して、やってみて。

お礼

なんとか、無事にできるようになりました。
ありがとうございました。

回答No.2

kokorone

<<オリジナル>>
if (Flag == 0)
{
for (nLoop = nCurrent; nLoop < nSpan + nCurrent; nLoop ++)
{
parent.scroll(nLoop , 1);
}
}
else
{
for (nLoop = nCurrent; nLoop > nCurrent - nSpan; nLoop --)
{
parent.scroll(nLoop, 1);
}
}

＜＜カスタマイズ後＞＞
if (Flag == 0)
{
for (nLoop = nCurrent; nLoop < nSpan + nCurrent; nLoop +=5)
{
parent.scroll(nLoop , 5);
}
}
else
{
for (nLoop = nCurrent; nLoop > nCurrent - nSpan; nLoop -=5)
{
parent.scroll(nLoop, 5);
}
}
少し見づらいかもしれませんが。
変更点はわかりますでしょうか？
あとは、数値を変更してテストしてみてください。
プログラムコードは先ほどのサイトから、ZIP形式・LZH形式で
ダウンロードできます。

補足

お返事ありがとうございます。
もう少しスムーズにスクロールする感じを出したいのですが、
難しいでしょうか…
また重ねて ご質問ですが、
移動の幅を指定したりは可能でしょうか？
例えば300px右に移動、とか…
しかもボタンをリンクに変える方法もわかりません。
いろいろ相談して申し訳ないです。

回答No.1

kokorone

http://usagi-js.com/sample/jssample2_4.htm
のサンプル８１ですが、
ボタンをリンクに代えれば、要望に近いものが実現できませんか？
ただ、横方向のスクロールバーは表示されていますが。
参考にしてください。

補足

さっそくアドバイスいただいてありがとうございます。
ここのサンプルは商用利用できるみたいなので
是非使用したいのですが、
http://www.amanojaku.net/jsmemo/hscroll.html​
のサンプルのように
移動時に「ススーッ」と動くような感じが理想です。
紹介いただいたサイトはカスタマイズも可能なようなので
どうにかならないものでしょうか…