Pada bulan April tahun ini, saya membuat efek membalik halaman drag-and-drop di asrama saya.
Awalnya dirancang untuk situs blog saya sendiri. Saya mendapat ide pada hari Selasa. Saya membolos selama dua hari pada hari Rabu dan Kamis untuk menghitung koordinat. Saya pulang pada hari Jumat dan menulis versi pertama pada malam hari Saya berharap ulasannya cukup bagus setelah dirilis. Banyak orang bertanya kepada saya bagaimana saya harus memodifikasi efek ini sehingga saya dapat menggunakannya di situs web saya, jadi saya memposting posting ini untuk menjelaskan prinsip efek ini secara detail.
Saya secara resmi menamai efek ini ThrowPage, dan saya pasti akan terus meningkatkan efek ini dan merilis kode yang dienkapsulasi untuk dihubungi semua orang. Mungkin sebulan kemudian, mungkin setahun kemudian, In Me God Trust
Artikel ini akan ditulis dalam urutan tiga lapisan terpisah: lapisan struktural, lapisan presentasi, dan lapisan perilaku:
Jalankan kotak kode
<html>
<kepala>
<title>Halaman Lempar</title>
<gaya tipe="teks/css">
html,isi{
lebar:100%;
tinggi:100%;
batas:0 piksel;
margin:0 piksel;
meluap: tersembunyi;
}
#menu{
lebar:1000 piksel;
tinggi:500 piksel;
meluap: tersembunyi;
latar belakang:biru muda;
}
.halaman{
posisi:mutlak;
lebar:300 piksel;
tinggi:400 piksel;
kiri:350 piksel;
atas:50 piksel;
latar belakang:#FFF;
batas:1 piksel padat #999;
}
kamu{
gaya daftar: tidak ada;
tinggi:320 piksel;
margin:20 piksel;
bantalan:0 piksel;
latar belakang:#EEE;
}
li{
ukuran font:12px;
tinggi:20 piksel;
tinggi garis:20px;
border-bottom:1px putus-putus #999;
}
li rentang{
mengapung:kanan;
}
li a{
warna:#000;
dekorasi teks: tidak ada;
}
li a: arahkan kursor{
dekorasi teks: garis bawah;
}
.tip{
tampilan:blok;
tinggi:20 piksel;
margin:0 piksel 20 piksel;
tinggi garis:20px;
perataan teks:tengah;
ukuran font:12px;
latar belakang:#999;
}
</gaya>
</kepala>
<tubuh>
<skrip tipe="teks/javascript">
id fungsi(obj){
kembalikan dokumen.getElementById(obj);
}
halaman var;
varmx;
var md=salah;
var sh=0;
var en=salah;
jendela.onload=fungsi(){
halaman=id("menu").getElementsByTagName("div");
if(halaman.panjang>0){
halaman[0].style.zIndex=2;
}
for(i=0;i<halaman.panjang;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"Seret dan lepas halaman</span>";
halaman[i].id="halaman"+i;
halaman[i].i=i;
halaman[i].onmousedown=fungsi(e){
jika(!en){
if(!e){e=e||window.event;}
ex=e.halamanX?e.halamanX:ex;
mx=350-ex;
this.style.cursor="bergerak";
md=benar;
if(dokumen.semua){
ini.setCapture();
}kalau tidak{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
halaman[i].onmousemove=fungsi(e){
jika(md){
en=benar;
if(!e){e=e||window.event;}
ex=e.halamanX?e.halamanX:ex;
this.style.kiri=ex+mx+"px";
if(ini.offsetLeft<350){
var cu=(ini.i==0)?halaman.panjang-1:ini.i-1;
halaman[sh].style.zIndex=0;
halaman[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
if(ini.offsetLeft>350){
var cu=(ini.i==halaman.panjang-1)?0:ini.i+1;
halaman[sh].style.zIndex=0;
halaman[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
}
}
halaman[i].onmouseup=fungsi(){
ini.gaya.cursor="default";
md=salah;
if(ini.offsetLeft==350){
en=salah;
}
if(dokumen.semua){
ini.releaseCapture();
}kalau tidak{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
terbang keluar (ini);
}
}
}
fungsi flyout(obj){
if(obj.offsetLeft < 350){
if( (obj.offsetLeft - 10) > 50 ){
obj.style.left=obj.offsetLeft - 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}kalau tidak{
obj.style.kiri= 50 +"px";
obj.style.zIndex=0;
terbang(id(obj.id));
}
}
if(obj.offsetLeft > 350){
if((obj.offsetLeft + 10) < 650){
obj.style.left=obj.offsetLeft + 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}kalau tidak{
obj.style.kiri= 650 + "px";
obj.style.zIndex=0;
terbang(id(obj.id));
}
}
}
fungsi terbang(obj){
if(obj.offsetLeft<350){
if((obj.offsetLeft + 10) < 350){
obj.style.left=obj.offsetLeft + 10+"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}kalau tidak{
obj.style.kiri= 350 +"px";
en=salah;
}
}
if(obj.offsetLeft>350){
if((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}kalau tidak{
obj.style.kiri=350+"px";
en=salah;
}
}
}
</skrip>
<div id="menu">
<div kelas="halaman">
<ul>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Mitra</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Pulau Indah</a></li>
<li style="background:coral;"><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Penari</a>< /li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Bergandengan tangan</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Cinta pertama di rumah</a></li>
</ul>
</div>
<div kelas="halaman">
<ul>
<li><span>25-09-11</span> <a href=" http://www.oern.cn " target="_blank"> Ah! Kekasih yang tak terhentikan</a></li>
<li><span>25-09-11</span> <a href=" http://www.oern.cn " target="_blank"> Jaringan</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Hujan yang Memikat</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Tahun 2000 lalu</a></li>
<li><span>25-09-11</span> <a href=" http://www.oern.cn " target="_blank"> Teroris Hijau</a></li>
</ul>
</div>
<div kelas="halaman">
<ul>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Waktu perlahan menghilang</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Pemandian Air Panas yang Tenang</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Bunga mekar</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Ah Hui memelihara seekor anjing</a></li >
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Benar atau palsu</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Partai Komunis Tsai Taiwan Selatan</a></li>
</ul>
</div>
</div>
</tubuh>
</html>
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]
lapisan struktural
Bagaimana cara memperluas isi direktori demi halaman? Mungkin iya, setidaknya begitulah cara saya menulisnya
<div id="menu">
<div kelas="halaman">
<ul>
<li><span>09-11-25</span><a>Lagu Cinta 1980</a></li>
<li><span>25-11-09</span><a>Lagu Cinta 1990</a></li>
<li><span>09-11-25</span><a>Lagu Cinta 2000</a></li>
<li><span>09-11-25</span><a>Ibu</a></li>
</ul>
<span class="tip">seret dan lepas 1/2 halaman</span>
</div>
<div kelas="halaman">
<ul>
<li><span>09-11-25</span><a>Mitra</a></li>
<li><span>09-11-25</span><a>Hilang</a></li>
<li><span>09-11-25</span><a>Masa kanak-kanak</a></li>
<li><span>25-11-09</span><a>Anak Gembala</a></li>
</ul>
<span class="tip">2/2 halaman seret dan lepas untuk membalik halaman</span>
</div>
</div>
.jpg)
<ul> adalah daftar setiap halaman, bagian abu-abu terang pada gambar
<li> adalah item dalam daftar, bagian karang dalam gambar
<span class="tip"> tidak boleh muncul di xhtml dan harus ditambahkan dengan js. Ini adalah tanda indeks di bawah setiap halaman, bagian abu-abu gelap pada gambar
<div class="page"> adalah halaman dalam direktori, bagian putih pada gambar
<div id="menu"> adalah direktori yang berisi semua halaman, bagian gambar berwarna biru cerah. Tentu saja, jika tidak ada yang lain di halaman kecuali efek ini, tag ini tidak perlu ditulis, maka tag induk dari semua <div class="page"> adalah <body>
Mungkin Anda akan mengatakan bahwa direktori tersebut juga harus <ul>, jadi harus ditulis seperti ini
<ul id="menu">
<li kelas="halaman">
<ul>
<li><span>09-11-25</span><a>Lagu Cinta 1980</a></li>
<li><span>25-11-09</span><a>Lagu Cinta 1990</a></li>
<li><span>09-11-25</span><a>Lagu Cinta 2000</a></li>
<li><span>09-11-25</span><a>Ibu</a></li>
</ul>
<span class="tip">seret dan lepas 1/2 halaman</span>
</li>
<ul kelas="halaman">
<ul>
<li><span>09-11-25</span><a>Mitra</a></li>
<li><span>09-11-25</span><a>Hilang</a></li>
<li><span>09-11-25</span><a>Masa kanak-kanak</a></li>
<li><span>25-11-09</span><a>Anak Gembala</a></li>
</ul>
<span class="tip">2/2 halaman seret dan lepas untuk membalik halaman</span>
</li>
</li>
Ini memang lebih semantik, tapi masalah akan langsung muncul