ページの切り替えに効果を使う

解決済

質問者：hana-fuji
質問日時：2008/10/15 09:37
回答数：1件

はじめまして！
こちらの参考サイトのようにページが遷移されたときにモヤッとした
効果を使う方法はどうすればいいのでしょうか？
こういった効果を出すプラグインがあるのでしょうか？

参考サイト（株式会社ワークスコーポレーション）
http://www.wgn.co.jp/store/

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： _pipi_
回答日時：2008/10/17 10:12

まったく同じ方法ではないと思います。

コードも洗練されていません！
page0と同じ大きさのscreenの透明度を変え、不透明になった時点で
内容を切り替えています。
本来なら画面の書き換えはAjaxを使っていると思いますが
面倒なので・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><style>.hide{display:none} .vi{display:block}</style></head>
<body style="background-color:#eef;margin:0px;">
<div style="width:200px;height:600px;background-color:#efe;float:left;">
abc
</div>
<div>
Title /
<input type="button" value="<" onClick="vpage(-1)"> /
<input type="button" value=">" onClick="vpage(+1)">

<div id="page" style="width:500px; height:600px;background-color:#fee">

<div id="page0">
page.0<br>
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
<img src="hoge.jpg" width="400" height="280">
</div>

<div id="page1" class="hide">
page.1<br>
たちつてと<br>
なにぬねの<br>
はひふへほ<br>
<img src="hoge.jpg" width="400" height="280">
</div>

<div id="page2" class="hide">
page.2<br>
まみむめも<br>
やゆよ<br>
いつも思うのだが、周りは愛想が悪いね～
<img src="hoge.jpg" width="400" height="280">
</div>

</div>
</div>
<script>
var P=0,PN=3;
function vpage(n){
var obj=document.getElementById('page');
if(!document.getElementById('screen')){
newobj = document.createElement('div');
newobj.id='screen';
with( newobj.style ){
position='absolute';
backgroundColor='#fee';
border='1px #f00 solid';
top = obj.offsetTop;
left = obj.offsetLeft;
width = obj.offsetWidth;
height = obj.offsetHeight;
filter='alpha(opacity=0)';
MozOpacity = 0
opacity = 0;

}
document.body.appendChild(newobj);
}
P=(P+n+PN)%3;
var tmp = new ImageOpacity('screen',0,20,50);
setTimeout(view,400);
setTimeout(function(){ImageOpacity('screen',100,-20,50)},400);
}
function view(){
for(var i=0;i<PN;i++){
document.getElementById('page'+i).className=(i==P)?'vi':'hide';
}
}
function ImageOpacity( id, opa, step, wtime ){
this.opacitySet = function(n){
this.opacity=(n!=undefined)?n:this.opacity;
this.obj.style.filter='alpha(opacity='+this.opacity+')';
this.obj.style.MozOpacity = this.obj.style.opacity = this.opacity/100;
}
this.go = function(step,wtime){
func[id] = this;
this.opacity+=step;
if(step>0 && this.opacity>100) this.opacity = 100;
if(step<0 && this.opacity<1) this.opacity = 0;
this.opacitySet();
if( this.opacity%100 ) setTimeout( function(){ func[id].go( step, wtime);}, wtime);
}
var func=[];
this.obj = document.getElementById( id );
this.opacitySet(opa);
if( wtime ) this.go( step, wtime );
}

</script>