面白１２■１枚ページめくり

●2016/07/14：即時関数で囲んで、グローバル変数を消しました。
１枚の画像が中央で折れて、ぺージめくりをするJavaScriptです。
ソースの中で、自動でページめくりをするか、画像クリックでページめくりをするかを選択できます。
原本はHIMAJINから。

原本をHTML5に対応にし、画像表示位置を自由に指定できるようにしました。
さらに原本は使用する画像のサイズによって、動作しないことがありましたが、ＱＰＯＮを参考にして、画像サイズにかかわらず動作できるようにしました。

■１枚ページめくりに文字と画像入りのJavaScriptはこちら→　面白１３■１枚ページめくり文字入り
■１枚ページめくりにコメント付きのJavaScriptはこちら→　面白１４■１枚ページめくりコメ付き

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>面白１２■１枚ページめくり</title>

<!--★コピーここから-->
<style type="text/css"><!--
/*★必須。ページめくり領域の指定。この指定の中ではpaddingは使用しないこと*/
#wakuP{
position:relative;/*★必須。位置指定。必ずposition:●●;を使用して指定すること*/
margin:50px auto;/*★中央配置(上下、左右）*/
width:532px;/*★必須。スライド画像横幅*/
height:400px;/*★必須。スライド画像縦幅*/
box-shadow:5px 5px 10px #666;/*★影指定。お好みで*/
border:solid 20px #def;/*★枠線水色。お好みで*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記１行はページめくり領域領域指定。id="wakuP"を必ず記入-->
<div id="wakuP"></div>

<script type="text/javascript"><!--
/*================================================================
ぺーじめくり　By  http://himajin.moo.jp/freejava/imgchange/change4.html(サイト名HIMAJIN)
参考：http://www2a.biglobe.ne.jp/~qpon/js/?http://qpon.quu.cc/java/book/book3_b.htm(サイト名ＱＰＯＮ)
★HTML5対応。簡略化　　　2016/07/14
==================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["wa6.jpg","wa7.jpg","wa8.jpg","wa9.jpg","wa10.jpg"];
var myurl="";          //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var nostop=1;          //★自動切替なら 1、画像クリックで入れ替えるときは 0
var spd=100;           //★原本50。自動切替速度。小さいほど速い。
var stsec=2000;        //★原本2000。クリックで入れ替えるときの速度（ミリ秒）

//指定ここまで-----------------------------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}
var imgw=wakuP.clientWidth, imgh=wakuP.clientHeight;//wakuP範囲指定に修正
var move=Math.floor(imgw/10);//めくれる速度。ＱＰＯＮ参照
imgw=move*10;//移動ピッチ。この行が無いと動作しない。ＱＰＯＮ参照
var hfw=Math.floor(imgw/2);//スライド横幅半分
var i=1;
var oc=(nostop)?"":onclick=function (){imgchange();};//即時関数用に修正
var tl=(nostop)?"":"クリックしてください";
var cssA='position:absolute;left:0;top:0;';
var css1=cssA+'clip:rect(0, "+hfw+"px, auto, 0);';
var css2=cssA+'clip:rect(0, auto, auto, "+hfw+"px);';
var sss ="<img src="+myurl+ga[0]+" id='IMG1' style='"+css1+"'>";
sss +="<img src="+myurl+ga[1]+" id='IMG3' "+oc+" title='"+tl+"' style='"+cssA+" clip:rect(0, auto, auto, "+hfw+"px);'>";
sss +="<img src="+myurl+ga[0]+" id='IMG2' "+oc+" title='"+tl+"' style='"+css2+"'>";
document.getElementById("wakuP").innerHTML=sss;
var w=0,IMGw=imgw, flag=0, Rclip, Lclip, Lposition;
function imgchange(){
if(IMGw===move && !flag){IMG2.src=myurl+ga[i];flag=1;}
if(IMGw===imgw && flag){i++;i%=ga.length;IMG3.src=myurl+ga[i]; flag=0;}
if(!flag){IMGw=imgw-w;Rclip=imgw-w/2;Lclip=hfw-w/2;Lposition=w/2;w+=move;}//修正
else{IMGw=imgw-w; Rclip=hfw-w/2; Lclip=0; Lposition=w/2; w-=move; if(!w){IMG1.src=myurl+ga[i];}//修正
}
IMG2.style.width= IMGw+"px";
IMG2.style.height=imgh+"px";
IMG2.style.clip = "rect(0, "+Rclip+"px, auto, "+Lclip+"px)";
IMG2.style.left= Lposition+"px";
if(IMGw===imgw && flag){if(nostop)setTimeout(imgchange,stsec);}
else{setTimeout(imgchange,spd);}
}
if(nostop)setTimeout(imgchange,stsec);
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

面白１２■１枚ページめくり 最終修正日 : 2016/07/14

　面白１２■１枚ページめくり　　　　最終修正日 : 2016/07/14