表示サイズなどを調整する
MooRevolverでは表示領域のサイズを指定することもできます。表示領域はスクリプトではなくスタイルシートで設定できます。表示領域は.revolver, ulのセレクタでwidthとheightを指定します。ただし、ブラウザ画面に合わせて表示されるようにautoを指定するとSafariとOperaでは何も表示されなくなるので注意してください。回転する画像自体のサイズを指定する場合もスタイルシートで行ないます。画像のサイズは.revolver div, liセレクタでwidthとheightを指定します。実際のプログラムはサンプル07になります。
 |
サンプル07の実行結果 |
サンプル07 (main.css)
.revolver, ul {
width : auto; /* autoにするとSafari, Operaで動作しない */
height : auto;
border:0px solid black;
}
.revolver div, li {
position:absolute;
width:100px; /* 表示される最大サイズ */
height:100px;
}
最初にも書きましたがMooRevolverは画像だけでなくテキストも回転させることができます。ただし、テキストの場合には文字サイズの調整は行なわれないため、スタイルシートでoverflow:hiddenとしておく必要があります(サンプル08)。
 |
 |
サンプル08の実行結果 |
画像だけでなく |
 |
テキストも回転する |
サンプル08
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>MooRevolverサンプル</title>
<link rel="stylesheet" href="css/MooRevolver.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/MooRevolver.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
var mrObj = new MooRevolver("album", { fade:true });
mrObj.getNext.periodical(2000, mrObj);
}
// --></script>
</head>
<body>
<h1>MooRevolver サンプル</h1>
<div id="album" class="revolver">
<div>画像だけでなく</div>
<div>テキストでも</div>
<div>同じように</div>
<div>回転表示させる</div>
<div>事ができます。</div>
<div><img src="photo/006.jpg" width="96" height="54" alt="苔"></div>
<div>画像との混在も可能です</div>
<div><img src="photo/008.jpg" width="96" height="54" alt="たんぽぽ"></div>
</div>
</body>
</html>
MooRevolverは複数の商品や写真をまとめて効果的にみせたい場合に利用するとよいでしょう。
