Startseite>Webdesign-Tutorial>Web-Spezialeffekte

Ausführliche Erläuterung des Umblätterns per Drag-and-Drop (ThrowPage)

Autor：Eve Cole Aktualisierungszeit：2009-11-30 15:46:23

Im April dieses Jahres habe ich in meinem Wohnheim einen Drag-and-Drop-Umblättereffekt erstellt.

Es wurde ursprünglich für meine eigene Blog-Website entworfen. Am Mittwoch und Donnerstag habe ich den Unterricht geschwänzt, am Freitag bin ich nach Hause gegangen Erwarten Sie, dass die Kritiken nach der Veröffentlichung ziemlich gut waren. Viele Leute haben mich gefragt, wie ich diesen Effekt modifizieren sollte, damit ich ihn auf meiner Website verwenden kann, deshalb veröffentliche ich diesen Beitrag, um das Prinzip dieses Effekts im Detail zu erklären.

Ich nenne diesen Effekt offiziell ThrowPage und werde diesen Effekt auf jeden Fall weiter verbessern und den gekapselten Code veröffentlichen, damit jeder ihn aufrufen kann. Vielleicht einen Monat später, vielleicht ein Jahr später

Dieser Artikel wird in der Reihenfolge von drei separaten Schichten geschrieben: Strukturschicht, Präsentationsschicht und Verhaltensschicht:

Codefeld ausführen

<html>
<Kopf>
<title>ThrowPage</title>
<style type="text/css">
html,body{
Breite: 100 %;
Höhe: 100 %;
Grenze:0px;
Rand:0px;
Überlauf:versteckt;
}
#Speisekarte{
Breite: 1000 Pixel;
Höhe:500px;
Überlauf:versteckt;
Hintergrund:hellblau;
}
.Seite{
Position:absolut;
Breite:300px;
Höhe:400px;
links:350px;
oben:50px;
Hintergrund:#FFF;
Grenze: 1 Pixel durchgehend #999;
}
ul{
Listenstil:none;
Höhe: 320 Pixel;
Rand:20px;
Polsterung:0px;
Hintergrund:#EEE;
}
li{

Schriftgröße:12px;
Höhe:20px;
Zeilenhöhe:20px;
border-bottom:1px gestrichelt #999;
}
li span{
float:right;
}
li a{
Farbe:#000;
Textdekoration: keine;
}
li a:hover{
Textdekoration:unterstrichen;
}
.Tipp{
Anzeige:Block;
Höhe:20px;
Rand: 0px 20px;
Zeilenhöhe:20px;
text-align:center;
Schriftgröße:12px;
Hintergrund:#999;
}
</style>
</head>
<Körper>
<script type="text/javascript">
Funktions-ID(obj){
return document.getElementById(obj);
}
var-Seite;
varmx;
var md=false;
var sh=0;
var en=false;
window.onload=function(){
page=id("menu").getElementsByTagName("div");
if(page.length>0){
page[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"Seiten-Drag-and-Drop</span>";
page[i].id="page"+i;
Seite[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="move";
md=true;
if(document.all){
this.setCapture();
}anders{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
page[i].onmousemove=function(e){
if(md){
en=wahr;
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;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
if(this.offsetLeft>350){
var cu=(this.i==page.length-1)?0:this.i+1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
}
}
page[i].onmouseup=function(){
this.style.cursor="default";
md=false;
if(this.offsetLeft==350){
en=false;
}
if(document.all){
this.releaseCapture();
}anders{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
Flyout(dies);
}
}
}
Funktions-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);
}anders{
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 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}anders{
obj.style.left= 650 + "px";
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
}
Funktion 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);
}anders{
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);
}anders{
obj.style.left=350+"px";
en=false;
}
}
}
</script>
<div id="menu">
<div class="page">
<ul>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Partner</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Wunderschöne Insel</a></li>
<li style="background:coral;"><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Tänzerin</a>< /li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Hand in Hand</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Das erste Liebeshaus</a></li>
</ul>
</div>
<div class="page">
<ul>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Ah! Der unaufhaltsame Liebhaber</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Netzwerk</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Verführerischer Regen</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Vergangenes 2000</a></li>
<li><span>25.09.11</span> <a href=" http://www.oern.cn " target="_blank"> Grüner Terrorist</a></li>
</ul>
</div>
<div class="page">
<ul>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Die Zeit vergeht langsam</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Ruhige heiße Quelle</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Blühende Blumen</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Ah Hui hat einen Hund großgezogen</a></li >
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Wahr oder falsch</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Kommunistische Partei Südtaiwans Tsai</a></li>
</ul>
</div>
</div>
</body>
</html>

[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Strukturschicht

Wie erweitere ich den Inhalt eines Verzeichnisses seitenweise? Vielleicht ja, zumindest habe ich es so geschrieben

<div id="menu">
<div class="page">
<ul>
<li><span>25.11.09</span><a>Love Song 1980</a></li>
<li><span>25.11.09</span><a>Love Song 1990</a></li>
<li><span>25.11.09</span><a>Liebeslied 2000</a></li>
<li><span>25.11.09</span><a>Mutter</a></li>
</ul>
<span class="tip">1/2 Seite per Drag & Drop</span>
</div>
<div class="page">
<ul>
<li><span>25.11.09</span><a>Partner</a></li>
<li><span>25.11.09</span><a>Vermisst</a></li>
<li><span>25.11.09</span><a>Kindheit</a></li>
<li><span>25.11.09</span><a>Hirtenjunge</a></li>
</ul>
<span class="tip">2/2 Seiten per Drag-and-Drop umblättern</span>
</div>
</div>

<ul> ist eine Liste jeder Seite, der hellgraue Teil im Bild
<li> ist ein Element in der Liste, der Korallenteil im Bild
<span class="tip"> sollte nicht in xhtml erscheinen und von js hinzugefügt werden. Dies ist das Indexzeichen unter jeder Seite, der dunkelgraue Teil im Bild
<div class="page"> ist die Seite im Verzeichnis, der weiße Teil im Bild
<div id="menu"> ist ein Verzeichnis, das alle Seiten enthält, den leuchtend blauen Teil im Bild. Wenn es außer diesem Effekt nichts anderes auf der Seite gibt, muss dieses Tag natürlich nicht geschrieben werden, dann ist das übergeordnete Tag aller <div class="page"> <body>
Vielleicht werden Sie sagen, dass das Verzeichnis auch <ul> sein sollte, also sollte es so geschrieben werden

<ul id="menu">
<li class="page">
<ul>
<li><span>25.11.09</span><a>Love Song 1980</a></li>
<li><span>25.11.09</span><a>Love Song 1990</a></li>
<li><span>25.11.09</span><a>Liebeslied 2000</a></li>
<li><span>25.11.09</span><a>Mutter</a></li>
</ul>
<span class="tip">1/2 Seite per Drag & Drop</span>
</li>
<ul class="page">
<ul>
<li><span>25.11.09</span><a>Partner</a></li>
<li><span>25.11.09</span><a>Vermisst</a></li>
<li><span>25.11.09</span><a>Kindheit</a></li>
<li><span>25.11.09</span><a>Hirtenjunge</a></li>
</ul>
<span class="tip">2/2 Seiten per Drag-and-Drop umblättern</span>
</li>
</li>

Das ist zwar semantischer, aber das Problem wird sofort auftreten

Ähnliche Artikel