スクロール量に応じて画像を切り替える

HOME
JavaScript入門
スクロール量に応じて画像を切り替える

以下のサンプルは、私がタブレットで実際に作った楽譜の切り替えスクリプトです。ページのスクロール量を取得して、クリック（タップ）する毎に次の楽譜を表示させます。楽譜画像のonclickイベントに記述しても良さそうですが、ちょっとした操作ですぐメニューが出てしまうので、スクロール量を取得する方が扱い易かったのです。

別に楽譜でなくても、漫画や他の画像の切り替えに応用することができると思います。

楽譜切り替え

以下のサンプルをクリックすると、560px×640pxのウィンドウが出て楽譜が表示されます。楽譜は全部で3枚で、クリック（タップ）する毎に次の楽譜に切り替わります。最後の楽譜を表示した後、最初の楽譜に戻ります。

サンプル（別窓）

<body onload="getTop()" onclick="moveScore()">

<style type="text/css">
body{ margin:0px; padding:0px; background-color:gray;}
div.space{ margin-top:10px; text-align:center; line-height:0; }
img{ border-width:0px; }
</style>

<div class="space"><img
 src="img/gakuhu1.png" height="640" alt=""><img
 src="img/gakuhu2.png" height="640" alt=""><img
 src="img/gakuhu3.png" height="640" alt="">
</div>

<script>
var doc;

//document.documentElementを使うか、document.bodyを使うか識別する関数
function getTop()
{
  scrollTo(0,10);  //最初に10pxだけ動かす
  
  var n = document.body.scrollTop;
  
  if ( n == 10 )
  {
    doc = document.body;
  }
  else
  {
    doc = document.documentElement;
  }
}

//タップして楽譜を切り替える関数
function moveScore()
{
  var sc = doc.scrollTop - 10 ;
  if ( sc < 640 )
  {
    scrollTo(0,650);
  }
  else if ( sc < 1280 )
  {
    scrollTo(0,1290);
  }
  else
  {
    scrollTo(0,10);
  }
}
</script>

スクリプトの説明

では、上記スクリプトを詳しく見てみましょう。

bodyタグ内にonload,onclickイベントを記述

<body onload="getTop()" onclick="moveScore()">

まず最初に、bodyタグ内にonload属性を記入し、関数getTop()を呼び出すようにしています。ページが読み込まれると、10px下に移動させます。

もう1つはonclick属性を記述して、関数moveScore()を呼び出すようにします。 ブラウザ画面上をクリックすると、ページのスクロール量を取得して楽譜を切り替えます。

CSSによるスタイル指定

<style type="text/css">
body{ margin:0px; padding:0px; background-color:gray;}
pre.space{ margin-top:10px; text-align:center; line-height:0; }
img{ border-width:0px; }
</style>

次はスタイルを指定しています。bodyタグには余白を0px、背景を灰色にするよう指定しています。

クラス名「space」の付いたdivタグには、上余白10px、文字揃えを中央揃えに、行間を0に指定しました。

最後はimgタグで、周りに付く枠線の幅を0pxにしました。

楽譜の画像を並べて表示する

<div class="space"><img
 src="img/gakuhu1.png" height="640" alt=""><img
 src="img/gakuhu2.png" height="640" alt=""><img
 src="img/gakuhu3.png" height="640" alt="">
</div>

今度は楽譜の画像タグを、中央揃え、行間0のdivタグ内に記述していきます。 imgタグ内部で折り返していますが、こうしないと各楽譜の間に微妙に隙間が出来るからです。楽譜画像の縦幅は640pxです。

関数getTop()

var doc;

function getTop()
{
  scrollTo(0,10);
  
  var n = document.body.scrollTop;
  
  if ( n == 10 )
  {
    doc = document.body;
  }
  else
  {
    doc = document.documentElement;
  }
}

続いて、スクリプト部分を見ていきます。最初にグローバル変数docを宣言しています。前のページで述べたように、ブラウザによってスクロール量を取得する方法が違います。この変数に、document.documentElementかdocument.bodyのどちらかを格納しようと思います。

そして関数getTop()内ですが、最初にscrollTo()で10px下に移動しています。その後、document.body.scrollTopでスクロール量を取得し、変数nに代入します。

if文で、変数nの値が10か調べます。もし10ならば、document.bodyでスクロール量を取得できたということです。それで変数docには、document.bodyを格納します。取得できなかった場合は、document.documentElementの方を使わなければなりません。それを変数docに格納します。

タップして画像を切り替える関数moveScore()

function moveScore()
{
  var sc = doc.scrollTop - 10 ;

  if ( sc < 640 )
  {
    scrollTo(0,650);
  }
  else if ( sc < 1280 )
  {
    scrollTo(0,1290);
  }
  else
  {
    scrollTo(0,10);
  }
}

こちらの関数は、クリック（タップ）した時の処理を記述しています。最初に、doc.scrollTopでスクロール量を取得しています。その後、ページ先頭に入れた10pxの余白分を減らして、変数scに代入しました。

その後は、if文でスクロール量を調べて、次の画像の先頭にスクロールするよう指定していきます。画像の縦幅が640pxだったので、変数scの値が640px未満なら次の画像の先頭である650px（最初の画像の縦幅＋先頭の10pxの余白）に移動し、「640 <= sc < 1280」なら3番目の画像の先頭である1290pxを指定します。最後の画像が表示されているならば、先頭に戻ります。

個人用のタブレットであればブラウザを自分で選択できるので、 document.bodyかdocument.documentElementのどちらが使えるか判別する必要はないでしょう。また画像も自分のタブレットの画面サイズに合わせて切り出すことができます。画像閲覧には結構使い勝手が良いスクリプトなので、機会があれば活用なさってください。

前へ INDEXへ