ドラッグ＆ドロップによるページめくり（ThrowPage）の詳細説明

著者：Eve Cole 更新時間：2009-11-30 15:46:23

今年の 4 月、私は寮でドラッグアンドドロップによるページめくりのエフェクトを作成しました。

元々は自分のブログサイト用にデザインしたもので、火曜日と木曜日に授業を休んで金曜日に帰宅して、夕方に最初のバージョンを書きました。リリース後のレビューはかなり良かったと思います。このエフェクトを自分の Web サイトで使用するにはどのように変更すればよいかという質問を多くの人が受けたので、このエフェクトの原理を詳しく説明するためにこの投稿を投稿しました。

私はこのエフェクトを正式に ThrowPage と名付けます。私は間違いなくこのエフェクトを改良し続け、おそらく 1 か月後、おそらく 1 年後、In Me God Trust と呼ばれるカプセル化されたコードをリリースします。

この記事は、構造層、プレゼンテーション層、行動層の 3 つの層の順序で書かれます。

コードボックスを実行

<html>
<頭>
<title>スローページ</title>
<style type="text/css">
html,ボディ{
幅:100%;
高さ:100%;
境界線:0px;
マージン:0px;
オーバーフロー:非表示;
}
＃メニュー{
幅:1000ピクセル;
高さ:500ピクセル;
オーバーフロー:非表示;
背景:水色;
}
。ページ{
位置:絶対;
幅:300ピクセル;
高さ:400ピクセル;
左:350ピクセル;
上:50ピクセル;
背景:#FFF;
ボーダー:1px ソリッド #999;
}
ウル{
リストスタイル:なし;
高さ:320ピクセル;
マージン:20ピクセル;
パディング:0px;
背景:#EEE;
}
リ{

フォントサイズ:12px;
高さ:20ピクセル;
行の高さ:20px;
border-bottom:1px 破線 #999;
}
リスパン{
フロート:右;
}
りあ{
色:#000;
テキスト装飾:なし;
}
リア:ホバー{
テキスト装飾:下線;
}
。ヒント{
表示:ブロック;
高さ:20ピクセル;
マージン:0px 20px;
行の高さ:20px;
テキスト整列:中央;
フォントサイズ:12px;
背景:#999;
}
</スタイル>
</head>
<本文>
<script type="text/javascript">
関数ID(obj){
document.getElementById(obj)を返します;
}
var ページ。
ヴァームクス;
var md=false;
var sh=0;
var en=false;
window.onload=function(){
page=id("メニュー").getElementsByTagName("div");
if(page.length>0){
ページ[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"ページのドラッグアンドドロップ</span>";
ページ[i].id="ページ"+i;
ページ[i].i=i;
page[i].onmousedown=function(e){
if(!en){
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
mx=350-ex;
this.style.cursor="移動";
md=true;
if(document.all){
this.setCapture();
}それ以外{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
page[i].onmousemove=function(e){
if(md){
en=true;
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
this.style.left=ex+mx+"px";
if(this.offsetLeft<350){
var cu=(this.i==0)?page.length-1:this.i-1;
ページ[sh].style.zIndex=0;
ページ[cu].style.zIndex=1;
this.style.zIndex=2;
シュ=キュ;
}
if(this.offsetLeft>350){
var cu=(this.i==page.length-1)?0:this.i+1;
ページ[sh].style.zIndex=0;
ページ[cu].style.zIndex=1;
this.style.zIndex=2;
シュ=キュ;
}
}
}
page[i].onmouseup=function(){
this.style.cursor="デフォルト";
md=false;
if(this.offsetLeft==350){
en=false;
}
if(document.all){
this.releaseCapture();
}それ以外{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
フライアウト(これ);
}
}
}
関数フライアウト(obj){
if(obj.offsetLeft < 350){
if( (obj.offsetLeft - 10) > 50 ){
obj.style.left=obj.offsetLeft - 10 + "ピクセル";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}それ以外{
obj.style.left= 50 +"px";
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
if(obj.offsetLeft > 350){
if((obj.offsetLeft + 10) < 650){
obj.style.left=obj.offsetLeft + 10 + "ピクセル";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}それ以外{
obj.style.left= 650 + "ピクセル";
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
}
関数 flyin(obj){
if(obj.offsetLeft<350){
if((obj.offsetLeft + 10) < 350){
obj.style.left=obj.offsetLeft + 10+"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}それ以外{
obj.style.left= 350 +"px";
en=false;
}
}
if(obj.offsetLeft>350){
if((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}それ以外{
obj.style.left=350+"px";
en=false;
}
}
}
</script>
<div id="メニュー">
<div class="ページ">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">パートナー</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">美しい島</a></li>
<li style="background:coral;"><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">ダンサー</a>< /li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">手を取り合って</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">初恋の家</a></li>
</ul>
</div>
<div class="ページ">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">ああ!止められない恋人</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">ネットワーク</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">魅力的な雨</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> 2000 年以降</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">グリーンテロリスト</a></li>
</ul>
</div>
<div class="ページ">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">時間がゆっくりと消えていく</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">静かな温泉</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">咲く花</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Ah Hui が犬を飼いました</a></li >
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">真実か偽物か</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank">南台湾蔡共産党</a></li>
</ul>
</div>
</div>
</body>
</html>

[Ctrl+A すべて選択ヒント: 最初にコードの一部を変更してから実行を押すことができます]

構造層

ディレクトリの内容をページごとに展開するにはどうすればよいですか?そうかもしれない、少なくとも私はそう書いた

<div id="メニュー">
<div class="ページ">
<ul>
<li><span>09-11-25</span><a>ラブソング 1980</a></li>
<li><span>09-11-25</span><a>ラブソング 1990</a></li>
<li><span>09-11-25</span><a>ラブソング 2000</a></li>
<li><span>09-11-25</span><a>母</a></li>
</ul>
<span class="tip">1/2 ページのドラッグアンドドロップ</span>
</div>
<div class="ページ">
<ul>
<li><span>09-11-25</span><a>パートナー</a></li>
<li><span>09-11-25</span><a>行方不明</a></li>
<li><span>09-11-25</span><a>子供時代</a></li>
<li><span>09-11-25</span><a>羊飼いの少年</a></li>
</ul>
<span class="tip">2/2 ページをドラッグアンドドロップしてページをめくる</span>
</div>
</div>

<ul>は各ページの一覧、写真の薄いグレーの部分です
<li> はリスト内の項目で、画像内のサンゴの部分です。
<span class="tip"> は xhtml ではなく js で追加する必要があります。各ページの下にあるインデックスマーク、図の濃い灰色の部分です。
<div class="page"> はディレクトリ内のページ、図の白い部分です。
<div id="menu"> はすべてのページを含むディレクトリで、図の明るい青色の部分です。もちろん、ページ上にこの効果以外に何もない場合、このタグを記述する必要はありません。その場合、すべての <div class="page"> の親タグは <body> になります。
ディレクトリも <ul> にする必要があるので、次のように記述する必要があると言うかもしれません。

<ul id="メニュー">
<li class="ページ">
<ul>
<li><span>09-11-25</span><a>ラブソング 1980</a></li>
<li><span>09-11-25</span><a>ラブソング 1990</a></li>
<li><span>09-11-25</span><a>ラブソング 2000</a></li>
<li><span>09-11-25</span><a>母</a></li>
</ul>
<span class="tip">1/2 ページのドラッグアンドドロップ</span>
</li>
<ul class="ページ">
<ul>
<li><span>09-11-25</span><a>パートナー</a></li>
<li><span>09-11-25</span><a>行方不明</a></li>
<li><span>09-11-25</span><a>子供時代</a></li>
<li><span>09-11-25</span><a>羊飼いの少年</a></li>
</ul>
<span class="tip">2/2 ページをドラッグアンドドロップしてページをめくる</span>
</li>
</li>

これは確かによりセマンティックですが、すぐに問題が発生します