• 締切済み

スクロール

同じページ内で横にずら～っとページを並べて リンクボタンを押す（コンテンツ？）と横にゆっくりスクロールしてそこのページで止まる・・・というページを見ました すごくカッコ良かったのでやってみたいと思うのですが スース（スプリクト）が良くわかりません ソースを見たところこんなものが記述してあります <script laguage="JavaScript"> <!-- function image(bana){ document.bn_blank.src=bana; } //--> </script> ソースを見て文を変える・・・というのは難しくてできそうにないのでくわしく説明されているサイトURLもしくは直接教えていただければ幸いです。

みんなの回答

  • nta
  • ベストアンサー率78% (1525/1942)
回答No.1

ソースをお読みになったところは関係なさそうですね。そのページがJavaScriptなのかFlashにより作成されたものなのか定かではありませんが、スクロールだけであればJavaScriptのscrollto 関数で可能です。ゆっくりというところがJavaScriptで小刻みに動かしたということでいいのかどうかよくわかりません。

参考URL：
http://www.suepon.com/jsm/script.html
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ページスクロールの繰り返しと巻き戻し

    ページを横スクロールさせるために下記のように記述しました。 最後まで行ったら最初に戻ってスクロールを繰り返させるには、何を足してあげればいいのでしょうか？ また、最後まで行ったら巻き戻して繰り返すことは可能でしょうか？ 具体的に教えていただければありがたいです。 よろしくお願いします。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>page</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function PageScroll(){ window.scrollBy(1,0); } setInterval(PageScroll,20); //--> </SCRIPT> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD> <IMG src="1.jpg"><IMG src="2.jpg"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  • ●jQuery；スクロールでついてくる背景画像

    よろしくお願いいたします。 下記のサイト様を参考に、 http://grow.weblike.jp/immature_design/javascript/159.html scrollFollowを利用し、 スクロールするとついてくるという設定をして、うまく実現できたのですが、 これを、コンテンツ全部でなく、コンテンツ内の背景画像だけ スクロールするとついてくるように指定することはできないでしょうか？ <script type="text/javascript"> $( document ).ready( function () { $( '#スクロールさせたい要素のid' ).scrollFollow( { speed: 1000, offset: 0, container: 'main' } ); } ); </script> どうぞよろしくお願いいたします。

  • javascriptでスクロール

    下記のhtmlソースでjavascriptでスクロールしてトップに戻るリンクを作ったんですが、WinのIEではスクリプトが効かずnoscript内の通常のアンカーが有効になってしまいます。 Firefoxではjavascriptの有効無効を判断して思った通りに動きます。WinIEでもjavascriptが有効のときはスクロールし、無効の時は通常のアンカーになるようにするにはどうすればいいのでしょうか？ WinIEはセキュリティの設定でjavascriptを有効にしてあります。 <script language=javascript> <!-- document.write('<a href="javascript:pageup()">pagetop</a>'); //--> </script> <noscript> <a href="#pagetop">pagetop</a> </noscript>

  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？

  • ページ読み込み時に自動でスクロール

    <body>にonloadを記述する方法以外で あるページを読み込んだ時に、自動的にページ最下部へ スクロールさせたいのですが 以下コードを記述してもエラーも起こらず、何も起きませんでした。 <script type="text/javascript" language="javascript"> <!-- window.onload = new function(){ window.scrollBy(0,300) }; window.onload = new function(){ alert("aaa") }; // --> </script> ちなみに、下側のalertは問題なく動作しております。 scrollby以外でのスクロールでもいいので、ご存じの方教えて下さい。 （できれば一瞬でスクロールする方がいいです。）

  • input type="image"で送信させない方法

    はじめまして、さっそくですが大変困っています。 行いたいことは、透明のイメージをクリックして、不透明のイメージに変更したいのですが、下記のソースを記述した場合にページがサブミットされてページが遷移してしまいます。ページを遷移させない良い方法をご伝授ください。 ちなみに、submitボタンやsubmitに記述は書いてません。 テスト環境はIE6です <script language="javascript"> function JS_Change(){ document.Entry.a1.src = "Select.gif"; 　　return false; } </script> <form name=Entry> <input type="image" name="a1" src="blank.gif" onClick="return JS_Change();">

    • ベストアンサー
    • HTML
  • 二つのJava Scriptを使うと動かない

    現在ウェブサイトを制作中ですがJavascriptについては配布されている物を設置すること位しかできません。 ウェブサイトの特徴として、横スクロールサイトであり、どうしてもギャラリーを設置したいのです。 横スクロールの為に <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); //easeInOutExpoはeasingプラグインから選べます event.preventDefault(); }); }); </script> とし、 マウスの上下スクロールで左右の動きをさせるために <script type="text/javascript" src="vscroll.js"></script> を置いてました。 この時点で動作は正常だったのですが、 ギャラリーが必要なため、lightbox <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> を置くと横スクロールとlightboxの動きができなくなり、レイアウトも崩れました。 どなたか詳しい方がいらっしゃいましたら、ご教授いただけませんでしょうか。 またlightboxにはこだわらないので、横スクロールサイトでギャラリーを設置できる方法がありましたら、教えてください。 ちなみにCSSでモーダルウィンドウを設置してみたのですが、横スクロールということもあり、Firefoxで正常に見る事ができませんでした。（サムネイル画像をクリックすると一番左に戻る） よろしくお願いします

  • JavaScript スクロール制御

    javascriptの動作についてご教授下さい。 ウィンドウ画面が横1275px 縦925pxで パージ内容が横長の横2350px 縦925pxの ページ全体を横軸スクロールで表示可能なサイトで、 <img>タグで画像を非表示（配置はセンター付近）し、 ある画像リンクへの文字列をクリックでjavascriptから その<img>を非表示から表示に切り替えています。 (ページイメージ) 　　　　　　　　　　　　　　　　　　　　　　　|リンク文字位置| 　　　　　　　　　　　　　　|img位置| 横2350px----------------------------------------------------→ で、今回の質問なのですが、リンク文字はページ右辺に配置しており javascriptからimgを可視化するとスクロールが初期位置(横0)に戻ってしまいます。 スクロール位置はそのままで画像の可視化・非可視化を切り替えたいのですが、ムリなのでしょうか？？ いちよう可視化後に scroll()でスクロールの位置を指定していても スクロールが初期位置(横0)に戻ってしまいます。↓↓↓ この現象はJavaScriptの仕様なのでしょうか？？ 横長のページであることと、リンク文字の配置は仕様として 変更できないものとお願いいたします。 環境 WinXP SP3 IE8(8.06) 画像切り替えソース //引数urlの画像をimgで表示する関数 function visi(url) { 　//imgのプロパティを取得 　var jpg = document.getElementById('jpg_link'); 　jpg.style.visibility = "visible"; jpg.style.display = "block"; jpg.src = url; 　//scroll(1500,0); ←　1500まで行くが初期位置に戻る・・・ }

  • 画像切り換えでTransitionをかけたい。

    フリーソースでの応用なのですが 次のJavaScriptで画像の自動切り換え表示に Transitionをかけたいのですが、知識がなくてわかりません。 アドバイスをお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var num = 1; function timer () { if(document.img.complete) { document.img.src = "photo" + num + ".jpg"; num++; if(num > 5) num = 1; } setTimeout("timer()", 1000); } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function viewSource(){ location = "view-source:" + window.location; } </SCRIPT> ----------- <BODY onload="setTimeout('timer()', 2000);"> <IMG SRC="photo1.jpg" NAME="img"> -----------

  • liteboxと滑らかスクロールが同時処理出来ない

    javascriptのliteboxと滑らかスクロールを１ページ内で行うことができません。 head内スクリプトタブ <!--滑らかスクロール--> <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.page-scroller.js" charset="utf-8"></script> <!--litebox--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js2/prototype.js"></script> <script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js2/lightbox.js"></script> イメージタグ <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a> ライトボックスのバージョンはlitebox2.0 滑らかスクロールは下記サイトからダウンロードさせて頂いたものを使ってます。 http://coliss.com/articles/build-websites/operation/javascript/296.html 一方のスクリプトタグをコメントで囲むと囲んでいない方のスクリプトが機能します。 また、下の方に記述したスクリプトが機能します。なので上記の場合、liteboxは機能し、滑らかスクロールの方は機能しません。 両方機能させるにはどうしたらよいのでしょうか？ ジャバスクリプトは初めて使うのであまり詳しくありません。 ご教授お願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する