検索サーチエンジンと動画リンク集byねっとねこ

Javaスクリプトで、複数の画像を絵本のように表示する方法

複数の画像をページをめくるような感じで表示させる Javaスクリプトの紹介!

ここで使用する Javaスクリプトは、WINDOWSの IE 6.0 7.0 にて
動作確認をしています。古いバージョンの IE や MAC専用の
ブラウザでの動作確認は しておりませんので、正しく表示され
るか?おかしな表示になるか?は ご自身で確認してください!

画像をページをめくる感じで表示する Javaスクリプト

複数の画像を まるで、ページをめくるような感じで表示させます。
ここでは、小さな画像を使ってますが、大きな風景画像などを使うと
迫力のある感じがすると思います。 一度、試してみてください。
画像が表示されない時は、下の [ 更新 ] ボタンを押して下さい。


Javaスクリプトは、この下です。
エリア内で 右クリック→ コピー

上の img タグと Javaスクリプトを <body> ボディタグ以下に
付けます。 htmlのどの位置に付けてもいいので、末尾がいいです。

変更箇所は、先ず、各 <img src="nyan01.jpg" のファイル名 と
その横の、 name="myImge1" ←ここの 数値です。
このサンプルでは、6つの画像ファイルを使っているので
順番に、name="myImge1" name="myImge2" name="myImge3"
と、なってます。画像の数だけ、順番に 数値をつけてください。
画像の使用枚数に制限は ありませんが、必ず 使用画像は
偶数にします。 2枚で、1つになるので、偶数です。

<script 部分で、変更するのは、以下の部分だけです。
////////////////////////////////////////////////////
var n=6; //1zoneあたりの写真の枚数(必ず偶数にしてください。)
var hhh=20; //右側ページの高さ方向表示位置
var www=150; //右側ページの横方向表示位置
var bbb=3000; //捲り終わってからの保持時間(1000=1秒)
var bai=1.0; //画像倍率
var mihiraki=0.0;//見開きの大きさ(0から1)
////////////////////////////////////////////////////

ここでは、6枚の画像を使っているので、var n=6; です。
var hhh=20; は、表示する場所の高さを示してます。
var www=150; は、表示する場所の横方向を示してます
数値を大きくして、表示される場所を確認しながら
任意の場所まで、持っていってください。

var bbb=3000; この数値だと、3秒ごとに、ページがめくれます。
var bai=1.0; は、そのままの画像サイズです。
2.0 にすると、2倍の大きさの画像になって、めくれます。

できるだけ、同じサイズの画像をつかってください。

スクリプト内で画像の表示場所を示しているので
html 上のタグは、無視されて画像が表示されます。
画像表示の場所を、改行タグ <br> や <p> を
多用して、空けておくことが必要です。

永遠に繰り返し、ページがめくれるのが、ちょっと難点です・・・

おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング